第5章 jQuery之事件

我们可以使用jQuery为页面上的元素动态的绑定一个事件，也可以动态的解绑一个事件

5.1 动态绑定与动态解绑

第1组

bind  (绑定,不具有事件委托)

//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成

$('.button').bind('click',function(){

alert(“事件不委托”);

});

注意：bind只能绑定已经存在的元素，对于新生成的元素无法动态绑定(即不具有事件委托)

 

unbind  ( 解绑 )

  //使用unbind删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件

//使用unbind参数删除指定类型事件

$('input').unbind('click'); //删除当前元素的click事件

    注意：事件委托在下方会讲到

第2组(事件委托)

  live  (绑定,具有事件委托，但是不支持连缀)

  //使用.live()具备动态绑定功能，jQuery1.3使用，jQuery1.7之后废弃，jQuery1.9删除

$('.button').live('click',function(){

alert(“事件委托”);

});

 

注意：

1、使用live绑定的是祖先元素docunent，而非button，所以永远只会绑定一次事件。

2、点击button其实是冒泡到document上的

3、点击document的时候，需要验证事件类型(event.type)和事件目标(event.target)如果 事件类型是click；事件目标是button，则触发

4、.live()方法已经被删除，无法使用了。需要测试使用的话，需要引入向下兼容插件。

5、不支持连缀，如：

 

die  ( 解绑 )

$('.button').die('click');

第3组(事件委托)

delegate (绑定,具有事件委托，支持连缀)

参数：

第一个参数是当前元素

第二个参数是事件方式

第三个参数是执行函数

 

如：

$('div').first().delegate('.button','click', function(){

$(this).clone().appendTo('div:first');

});

说明：

 

注意：

1、.delegate()需要指定父元素

2、delegate事件其实绑定在父类元素上

 

undelegate  ( 解绑 )

如：$('#box').undelegate('.button','click');

补充

目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，为此jQuery1.7以后推出了.on()和.off()方法彻底摒弃前面三组。

on替换绑定

替代.bind()方式

$('.button').on('click',function(){

alert('替代.bind()');

});

使用额外数据和事件对象

$('.button').on('click',{user:'Lee'}, function(e){

alert('替代.bind()'+e.data.user);

});

绑定多个事件

$('.button').on('mouseovermouseout',function(){

alert('替代.bind()移入移出！');

});

以对象模式绑定多个事件

$('.button').on({

mouseover:function(){

alert('替代.bind()移入！');

},

mouseout:function(){

alert('替代.bind()移出！');

}

});

阻止默认行为并取消冒泡

$('form').on('submit',function(){

return false;

});

或

$('form').on('submit',false);

 

//替代.bind()方式，阻止默认行为

$('form').on('submit',function(e){

e.preventDefault();

});

//替代.bind()方式，取消冒泡

$('form').on('submit',function(e){

e.stopPropagation();

});

替代.live()和.delegate()

$('#box').on('click','.button', function(){

$(this).clone().appendTo('#box');

});

off替换解绑

替代.unbind()方式

$('.button').off('click');

$('.button').off('click',fn);

$('.button').off('click.abc');

替代.die()和.undelegate()

$('#box').off('click','.button');

one

不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()来手工移除。jQuery提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。

 

//类似于.bind()只触发一次

$('.button').one('click',function(){

alert('one仅触发一次！');

});

 

//类似于.delegate()只触发一次

$('#box).one('click','.button',function(){

alert('one仅触发一次！');

});

复合事件

jQuery提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等

hover

$('div').hover(function(){

$(this).css('background','black'); //mouseenter效果

},function(){

$(this).css('background','red'); //mouseleave效果，可省略

});

toggle(被1.8版废用)

$('div').toggle(function(){  //第一次点击切换

$(this).css('background','black');

},function(){  //第二次点击切换

$(this).css('background','blue');

},function(){  //第三次点击切换

$(this).css('background','red');

});

 

注意：已经被1.8版废用，可以下载jquery-migrate.js文件，来向下兼容已被删除掉的方法

 

事件对象(event)

事件对象就是event对象，通过处理函数默认传递接受。

 

//通过处理函数传递事件对象

$('input').bind('click',function(e){  //接受事件对象参数

alert(e);

});

属性

data：获取事件调用时的额外数据

//通过event.data获取额外数据，可以是数字、字符串、数组、对象

$('input').bind('click',123,function(){  //传递data数据

alert(e.data); //获取数字数据

});

方法

1、stopPropagation：设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。

2、isPropagationStopped：判断是否取消了冒泡行为。

3、preventDefault：禁用默认行为。

4、isDefaultPrevented：判断是否禁用了默认行为。

5、stopImmediatePropagation：取消事件冒泡，并取消该事件的后续事件处理函数

6、isImmediatePropagationStopped：判断是否调用了stopImmediatePropagation()方法

冒泡和默认行为

冒泡

如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。

例：

<div style="width:200px;height:200px;background:red;">

<input type="button" value="按钮"/>

</div>

 

$('input').click(function(){

alert('按钮被触发了！');

});

 

$('div').click(function(){

alert('div层被触发了！');

});

 

$(document).click(function(){

alert('文档页面被触发了！');

});

 

效果：

当我们点击文档的时：

只触发文档事件；

 

当我们点击div层时：

触发了div和文档两个；

 

当我们点击按钮时：

触发了按钮、div和文档。

 

总结：

1、冒泡的前提：

A、元素重叠

B、重叠的元素绑定了同一个事件

2、触发的顺序是从小范围到大范围。这就是所谓的冒泡现象，一层一层往上。

 

阻止冒泡：event.stopPropagation()

这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。

如：

$('input').click(function(e){

alert('按钮被触发了！');

e.stopPropagation(); // 取消上层的所有冒泡行为

});

默认

网页中的元素，在操作的时候会有自己的默认行为。

比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按

钮会提交数据。

 

禁用默认行为：event.preventDefault()

 

注意：

如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时写上：

event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候，还有一种简写方案代替，就是直接return false。

如：

$('a').click(function(e){

return false;

});

模拟操作

在事件触发的时候，有时我们需要一些模拟用户行为的操作。

例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去点击。

  jQuery为我们提供了两个：

1、. trigger()

  2、.triggerHandler()

 

例1：

//点击按钮事件

$('input').click(function(){

alert('我的第一次点击来自模拟！');

});

 

//模拟用户点击行为

$('input').trigger('click');

 

例2：

// 这里效果与例1是一样的

$('input').click(function(){

alert('我的第一次点击来自模拟！');

}).trigger('click');

 

问题1：当模拟时，需要传递参数怎么办？

答：$('input').click(function(e,data1,data2){

alert(data1+',' +data2);

}).trigger('click',['abc', '123']);

注意：

1、事件执行传递参数，这个参数类似与event.data的额外数据，可以可以是数字、字符串、数组、对象。

2、当传递一个值的时候，直接传递即可。当两个值以上，需要在前后用中括号包含起来。但不能认为是数组形式triggerHandler使用上和上面差不多

如：

$('input').click(function(){

alert('我的第一次点击来自模拟！');

}).triggerHandler ('click');

trigger 与triggerHandler区别

1、triggerHandler()方法并不会触发事件的默认行为，而trigger()会

如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：

$('form').submit(function(e){

e.preventDefault(); //阻止默认行为

}).trigger('submit');

2、triggerHandler()方法只会影响第一个匹配到的元素，而trigger()会影响所有

3、triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的jQuery对象(方便链式连缀调用)

4、trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery扩展于DOM的机制，并非DOM特性。而.triggerHandler()不会冒泡

 

总结：

1、默认行为与冒泡问题

2、返回值问题

3、失明问题

命名空间(后面组件编程时会详细讲到)

有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。

 

例：

$('input').bind('click.abc',function(){

alert('abc');

});

 

$('input').bind('click.xyz',function(){

alert('xyz');

});

 

$('input').unbind('click.abc'); //移除click实践中命名空间为abc的

 

注意：

也可以直接使用('.abc')，这样的话，可以移除相同命名空间的不同事件。对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。

如：

$('input').trigger('click.abc');

事件委托

什么是事件委托？

例1：

有100个学生同时在某天中午收到快递，但这100个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。

  例2：

如果一个企业级应用做报表处理，表格有2000行，每一行都有一个按钮处理。如果用之前的.bind()处理，那么就需要绑定2000个事件，就好比2000个学生同时站在 学校门口等快递，不断会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面极度变慢或直接异常。而且，2000个按钮使用ajax分页的 话，.bind()方法无法动态绑定尚未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。

 

而在jQuery中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行相关处理即可。

堵塞问题解决：将处理的事件交给父元素(或祖先元素)

意外问题解决：动态绑定事件

注意：bind只能绑定已经存在的元素，对于新生成的元素无法动态绑定

自定义事件

事件必须满足三个条件：

1、事件必须有名称

2、事件必须绑定在某一个对象上

3、事件必须有触发条件

 

如：给div添加一个事件，该事件的名称为"itheima12很牛",当点击div的时候，触发click事件的同时触发"itheima12很牛"事件

$(function(){

     $("div").unbind("click");

     $("div").bind("click",function(){

         /**

            * 在点击div的时候，触发itheima12很牛事件

            */

         //$(this).trigger("第1个自定义事件",5);

       //$(this).trigger("第1个自定义事件",[5,6]); // 这里传的不是数组，而是两个参数

        $(this).trigger("第1个自定义事件",{

             aa:'aa',

             bb:'bb'

         });

     });

    

     $("div").unbind("第1个自定义事件");

     $("div").bind("第1个自定义事件",function(event,json){

         alert(json.aa);

         alert(json.bb);

     });

});