jq中on()的用法

一般情况下,我们可以直接采用click(),hover()等等直接绑定事件,但是既然on()存在,那么肯定有它的意义:

1.用来绑定多事件,并且为同一函数

$('div').on('click mouseover',function(){
    //do sth
});

2.多个事件绑定不同函数

$('div').on({
    'click':function(){
        //do sth
    },
    'mouseover':function(){
        //do sth
    }
});

3.事件代理

html:
<button id="bt1">按钮1</button>
jq:
$('#bt1').on('click',function(){
            $('body').append('<button class="bt2">按钮2</button>');
});

$('body').on('click','.bt2',function(){
    console.log('这是bt2');
});

利用on()可以实现事件代理, 因为bt2是动态生成的,要想执行bt2的点击事件，就必须采用这种方法, ‘click’之后的 ‘.bt2’参数就是筛选器,可以将想要绑定的元素传入.