JQuery通过简单示例比较trigger()与triggerHandler()的区别

web前端|js教程 在制作网页特效时，我们有时会需要使用到模拟操作，即模拟人工手动操作。这时，我们会想到JQuery中的模拟操作方法trigger()和triggerHandler()这2个方法。这2个方法都能够简单实现模拟人工手动操作，那么它们有什么区别呢？下面，我们就通过一个简单案例来介绍一下它们的区别，这个案例效果：刷新页面，就会自动模拟点击按钮效果，弹出提示。首先，新建一个页面，在页面中添加如下html代码：

*{padding:0; margin:0;}.hi{background:red;width:100px;height:100px; position:relative;}

这段HTML代码的表单，有2个按钮，它们的值分别是“aaa”和“bbb”，现在点击这2个按钮中的任意一个，都会都得到http://wanlimm.com页面。

然后，在之间添加发下 JS 代码：

$(function(){$(":submit").click(function(e){alert($(this).val());}).trigger('click');});

这里，我们用到的trigger方法，刷新这个页面，会有2次弹窗，分别显示“aaa”和“bbb”，然后会自动使用表单行为自动跳转到http://wanlimm.com这个页面。

如果把trigger换成triggerHandler ，就只会有1次弹窗，而且屏蔽表单行为，不会自动跳转到http://wanlimm.com页面。

我们再把html代码中的标蓝的form代码去掉，然后，再在JS代码中连缀方法CSS，如下：

$(function(){$(":submit").click(function(e){alert($(this).val());}).trigger('click').css('color','red');});

我们刷新页面时，2次弹窗后，按钮中的文字会变成红色。但是，如果把 trigger 改成 triggerHandler 后，刷新页面后，只会1次弹窗，而不会文字变红。

综上总结 trigger 与 triggerHandler 的区别：

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

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

3、triggerHandler()方法不能连缀其它方法，因为它返回的是当前事件执行的返回值，而不是对象；trigger()可以连缀其它方法，因为它返回当前包含事件触发元素的 jQuery 对象。

4、triggerHandler()在创建事件的时候，不会冒泡。trigger()会冒泡，但这种冒泡是自定义事件才能体现出来。