JavaScript 能把事件都写在一起吗?

<body>
    <div id="one" >aa</div>
    <div id="two">bb</div>
    <div id="three">cc</div>
    <div id="four">dd</div>
</body>

<script>
one.onclick=function djh1()
{
    alert( "aaaaaaa" );
}

two.onclick=function djh2()
{
    alert( "bbbbbbb" );
}

three.onclick=function djh3()
{
    alert( "ccccccc" );
}

我想让所有 onclick 在一起
目的是想让点击事件和 function 分开,因为万一function 好几百行,那看起来多乱呀!

也不想让点击事件出现在 HTML标签里,因为改的时候,还得从 html 找!

//事件在一起:
one.onclick...
two.onclick...
three.onclick...


//function 在一起:
function djh1()...
function djh2()...
function djh3()...

该怎么改呢?

// jquery 绑定在div 标签下

var func = function() {
    alert($(this).text());
};

$('div').on('click',func);

//or

var func = {
    'func1': function() {...},
    'func2': function() {...},
}
$('div').on('click',function() {
    func['func' + ($(this).index() + 1)]();
});

// or not jquery

var els = docuemnt.querySelectorAll('div');

els.forEach(function(el) {
    el.addEventListener('click',func);
})

var oneFun(){};
var twoFun(){};
var threeFun(){};

one.onclick=oneFun();
two.onclick=twoFun();
three.onclick=threeFun();

这样？

或者，这样?
var funs={

one:function(){},
two:function(){},
three:function(){}

}
one.onclick=funs.one;
two.onclick=funs.two;
three.onclick=funs.three;

把div 标签统一加一个 class 然后循环

建议“G_Koala_C”思路，比较好，更简洁。。。所有的div都加click事件，里面根据当前id来加载不同的业务逻辑

每个div上放个onClick事件，调用相同的方法，传不同的id作为参数，在方法里边判断id，根据id给出对应的逻辑。这种是把所有类似的function都合并成一个function。

$('div').on('click',onDivClick1)

function onDivClick1(){
    //do something
}

这种就可以达到你说的效果了，注意编号。

【热门文章】