JQuery手动触发事件API之：通过代码看清trigger与triggerHandler的差别

最新推荐文章于 2024-07-26 03:27:06 发布

aitangyong

最新推荐文章于 2024-07-26 03:27:06 发布

阅读量6.3k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/aitangyong/article/details/43309467

版权

本文探讨了JQuery中手动触发DOM事件的两种方法——trigger和triggerHandler的差异。trigger会引发事件冒泡并执行所有绑定的事件处理函数，而triggerHandler仅对jQuery对象集合的第一个元素执行事件处理，且不产生事件冒泡。两者在触发事件时都能传递自定义参数，且都支持事件命名空间。文章通过实例展示了它们在不同情况下的行为特点。

摘要由CSDN通过智能技术生成

本文只讨论JQuery如何手动触发DOM上绑定的事件处理函数，至于如何给DOM绑定事件处理函数，可以参考这篇文章。测试环境是IE11/FF17/Chrome39，JQuery版本是1.11.1和2.1.1都测试过。

下面这段js代码给button绑定了click事件处理函数，第一种是我们最常用的做法；第二种使用了自定义参数。

// 绑定事件的时候不自定义参数
$("#button").bind("click",function(event){  
	alert("clicked");
});  

// 使用自定义参数
$("#button").bind("click",{name:"aty"}, function(event){  
	 alert("params=" + event.data.name);  
});

如果我们想手动触发click事件，最常见的做法是通过$("#button").click()来触发，这种做法姑且叫方式一吧。

方式一触发事件有3个特点：

1. 会产生事件冒泡

2. 不会阻止事件在浏览器下的默认行为

3. 触发事件的时候，不能传递自定义参数

JQuery还允许我们使用trigger和triggerHandler手动触发事件，这2种方式有什么差别呢？下面我们来看一下。

1. trigger会触发事件冒泡，而triggerHandler则不会。这一点上trigger与方式一是一致的。<