jQuery on() 多个事件简写方式

Question

jQuery的"on()"方法,可以使用事件委托,例如:

el.on('click','.sub',function(){});

同时,也可以分别设置不同事件的处理函数,例如:

el.on({
    'click':function(){},
    'mousemove':function(){}
    });

现在的问题是,如何结合上述两种书写方式的特性,使代码更简洁?

Answer 1

采用jquery的链式结构，书写更加简洁
el.click（function(){

}）.mouseover(function(){

});

Answer 2

$('#btn').on('click mouseover',function(){
    console.log('触发事件');
})

Answer 3

第一种是第二种的子集 第二种就是最方便的了
比如

el.on({
    'click'，'.sub':function(){},
    'mousemove':function(){}
    });

Answer 4

过度追求简洁没有意义。如果硬要把两种结合起来写的话，手写代理就是了~

el.on({
    'click': function(ev) {
        if ($(this).is('.sub')) {
            //blablabla...
        }
    },
    'mousemove': function(ev) {
        if ($(this).is('.sub')) {
            //blablabla...
        }
    }
});

Answer 5

处理函数如果可以合并就选择

$('#btn').on('event1 event2',function(){
    //TODO...
})

否则

$("#btn").on("click", function(){
    //TODO...
}).on("mouseover",function(){
    //TODO...
});

看个人习惯,个人认为不用去纠结这些,怎么写好看 方便就行。

个人就看不惯这种:

$("#btn").on({
    event1:...,
    event2:...
});