首页 > js学习 > js基础知识 > jQuery中模拟操作,命名空间和事件委托
2016
12-16

jQuery中模拟操作,命名空间和事件委托

一.模拟操作

在事件触发的时候,有时我们需要一些模拟用户行为的操作(trigger())。例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击。

$('input').click(function () {alert('模拟点击!');}).trigger('click');

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

$('input').click(function (e, data1, data2) {alert(data1.a + ',' + data2[1]);}).trigger('click', [{'a' : '1', 'b' : '2'}, ['123','456']]);

.trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可。

$('input').click(function () {alert('模拟点击!');}).click(); //空的 click()执行的是trigger()

jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用和.trigger()方法一样。

$('input').click(function () {alert('模拟点击!');}).triggerHandler('click');

在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参数。但在某些特殊情况下,就产生了差异:

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

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

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

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

二.命名空间

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

$('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');

三.事件委托

什么是事件委托?用现实中的理解就是:有 100个学生同时在某天中午收到快递,但这100个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。而在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可。

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

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

</div>

$('.button').bind('click', function () {$(this).clone().appendTo('#box');});

点击了按钮复制新的按钮,但是点击事件无法动态绑定尚未存在的元素(新复制生成的按钮),点击新复制生成的按钮不会继续复制生成按钮。而且该点击事件如果html中有多个.button按钮的话会绑定多次点击事件,造成臃肿

在上面的例子中,我们使用了.clone()克隆。其实如果想把事件行为复制过来,我们只需要传递 true (clone(true))即可。这样也能实现类似事件委托的功能,但原理却截然不同。一个是复制事件行为,一个是事件委托。而在非克隆操作下,此类功能只能使用事件委托。

$('#box').delegate('.button', 'click', function () {$(this).clone().appendTo('#box');});//事件委托

$('#box').undelegate('.button','click');//取消事件委托

点击了按钮复制新的按钮,并且动态绑定尚未存在的元素(新复制生成的按钮),点击新复制生成的按钮也会继续复制生成按钮。而且该点击事件如果html中有多个.button按钮的话只会绑定一次点击事件

delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方式, 第三个参数是执行函数。 和.bind()方法一样, 可以传递额外参数。 .undelegate()和.unbind()方法一样可以直接删除所有事件,比如:.undelegate('click')。也可以删除命名空间的事件,比如:.undelegate('click.abc')。

1、事件委托事件绑定在document上,而点击.button其实是冒泡到document上。

2、点击document时,需要验证event.type(是否是点击事件)和event.target(是否是点击了.button)才能触发

.live()和.die()也是事件委托和取消委托,只不过在在jQuery1.4.3版本中废弃了。

在DOM 中很多元素绑定相同事件时;在DOM 中尚不存在即将生成的元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。