前言
1.模拟操作
2.命名空间
3.事件委托
4.on、off
一.模拟操作
在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
有时在模拟用户行为的时候,我们需要给事件执行传递参数,这个参数类似与 event.data 的额外数据,可以可以是数字、字符串、数组、对象。
- 1
- 2
- 1
- 2
注意:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含 起来。但不能认为是数组形式,下面给出一个复杂的说明。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
除了通过 JavaScript 事件名触发,也可以通过自定义的事件触发,所谓自定义事件其实 就是一个被.bind()绑定的任意函数。
- 1
- 2
- 3
- 1
- 2
- 3
.trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个 空的同名事件即可。
- 1
- 2
- 3
- 1
- 2
- 3
jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用 和.trigger()方法一样。
- 1
- 2
- 3
- 1
- 2
- 3
在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参 数。但在某些特殊情况下,就产生了差异:
1..triggerHandler()方法并不会触发事件的默认行为,而.trigger()会。
- 1
- 1
如果我们希望使用.trigger()来模拟用户提交,并且阻止事件的默认行为,则需要这么写:
- 1
- 2
- 3
- 1
- 2
- 3
2..triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
3..triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回 undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
- 1
- 2
- 3
- 1
- 2
- 3
4..trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是 jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
二.命名空间
有时,我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个 时候,可以使用事件的命名空间解决。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
注意:也可以直接使用(‘.abc’),这样的话,可以移除相同命名空间的不同事件。对于模
拟操作.trigger()和.triggerHandler(),用法也是一样的。 $('input').trigger('click.abc');
三.事件委托
什么是事件委托?用现实中的理解就是:有 100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。 而在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素) 上,然后再进行相关处理即可。
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
.live()原理就是把 click 事件绑定到祖先元素 (document)上,而只需要给 (document)绑 定一次即可,而非 2000 次。然后就可以处理后续动态加载的按钮的单击事件。在接受任何 事件时,$(document)对象都会检查事件类型(event.type)和事件目标(event.target),如果 click 事件是.button,那么就执行委托给它的处理程序。.live()方法已经被删除,无法使用了。需 要测试使用的话,需要引入向下兼容插件。
- 1
- 2
- 1
- 2
在上面的例子中,我们使用了.clone()克隆。其实如果想把事件行为复制过来,我们只 需要传递 true 即可:.clone(true)。这样也能实现类似事件委托的功能,但原理却截然不同。 一个是复制事件行为,一个是事件委托。而在非克隆操作下,此类功能只能使用事件委托。
- 1
- 2
- 3
- 1
- 2
- 3
当我们需要停止事件委托的时候,可以使用.die()来取消掉。
- 1
- 1
由于.live()和.die()在 jQuery1.4.3 版本中废弃了,之后推出语义清晰、减少冒泡传播层次、 又支持链接连缀调用方式的方法:.delegate()和.undelegate()。但这个方法在 jQuery1.7 版本中 被.on()方法整合替代了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
注意:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方 式,第三个参数是执行函数。和.bind()方法一样,可以传递额外参数。.undelegate()和.unbind() 方法一样可以直接删除所有事件,比如:.undelegate(‘click’)。也可以删除命名空间的事件, 比如:.undelegate(‘click.abc’)。
注意:.live()和.delegate()和.bind()方法一样都是事件绑定,那么区别也很明显,用途上 遵循两个规则:1.在 DOM 中很多元素绑定相同事件时;2.在 DOM 中尚不存在即将生成的 元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。
四.on、off 和 one
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱,为此 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃前面三组。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
注意:和之前方式一样,事件委托和取消事件委托也有各种搭配方式,比如额外数据、
命名空间等等,这里不在赘述。
不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off() 来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触 发一次的事件。