jquery的事件机制

jquery的事件机制

一. 简单的注册方式

缺点：一次只能注册一个事件(但可以通过.click链式调用继续调用)

例子：$(‘div’).click(function(){

               console.log(‘aaa’);

　　　})

二. bind方式

优点：可以同时注册多个事件

缺点：不方便，新增的元素标签没有事件

bind传个对象不会被覆盖

例子：$(‘div’).bind(function(){

               click:function(){console.log(‘点击事件’)},

               mouseover:function(){console.log(‘进入事件’);},

               mouseout:function(){console.log(‘移出事件’);}

　　　});

三. 委托代理事件(事件委托)delegate代表

优点：后加入的元素也可以有事件

缺点：只能注册委托，不能注册多个事件

例子：$(‘ul’).delegate(‘li’,’click’,function(){

        　　console.log($(this).text());

　　　});

四. on注册事件 jq1.7版本后才出现，统一了事件处理方式

on = bind+delegate;

例子：$(‘li’).on(‘click’,function(){

               console.log(‘bind点击事件’);

　　　});

$(‘ul’).on(‘click’,’li’,function(){

       console.log(‘delegate委托事件’);

});

on参数：

1.事件类型

2.事件执行者

3.传递给事件处理函数的数据(很少用)，e.data接受数据

4.事件处理函数

例子：var num = 150;

           $(‘ul’).on(‘click’,’li’,num,function(e){

                    e.data += 10;

                    console.log(num);//150  不影响 num值

　　　});

五. 事件执行顺序

li自己的事件>li委托给ul的事件>ul自身事件

$(‘li’).on(‘click’,function(){console.log(‘li自己的事件’)});

$(‘ul’).on(‘click’,’li’,function(){console.log(‘li委托给ul的事件’)});

$(‘ul’).on(‘click’,function(){console.log(‘ul自身的事件’)});

六. 事件解绑

1.bind()    解绑 unbind;

2.delegate() 解绑 undelegate();

3.on  解绑 off();