Rumah > Artikel > hujung hadapan web > JQuery通过简单示例比较trigger()与triggerHandler()的区别

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

巴扎黑asal: 2017-06-25 13:31:341325semak imbas

在制作网页特效时，我们有时会需要使用到模拟操作，即模拟人工手动操作。这时，我们会想到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()会冒泡，但这种冒泡是自定义事件才能体现出来。

Atas ialah kandungan terperinci JQuery通过简单示例比较trigger()与triggerHandler()的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：用法分享：jQuery如何使用自动触发事件triggerArtikel seterusnya：jquery的trigger和triggerHandler的区别示例介绍

Artikel berkaitan

Lihat lagi