首先，新建一个页面，在页面中添加如下html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>这段HTML代码的表单，有2个按钮，它们的值分别是“aaa”和“bbb”，现在点击这2个按钮中的任意一个，都会都得到http://wanlimm.com页面。
然后，在<script type="text/javascript"></script>之间添加发下 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()会冒泡，但这种冒泡是自定义事件才能体现出来。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
