首页 > 文章 > web前端 > JQuery通过简单示例比较trigger()与triggerHandler()的区别

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

巴扎黑原创: 2017-06-25 13:31:341267浏览

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

首先，新建一个页面，在页面中添加如下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页面。

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

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

这里，我们用到的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(&#39;click&#39;).css(&#39;color&#39;,&#39;red&#39;);
});

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

综上总结 trigger 与 triggerHandler 的区别：

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

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

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

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

以上是JQuery通过简单示例比较trigger()与triggerHandler()的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：用法分享：jQuery如何使用自动触发事件trigger下一篇：jquery的trigger和triggerHandler的区别示例介绍

查看更多