欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2024-02-15 12:17:58
...
在制作网页特效时，我们有时会需要使用到模拟操作，即模拟人工手动操作。这时，我们会想到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页面。

然后，在<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()会冒泡，但这种冒泡是自定义事件才能体现出来。

以上就是JQuery通过简单示例比较trigger()与triggerHandler()的区别的详细内容，更多请关注其它相关文章！

相关标签： JQuery 比较 示例 简单 通过

上一篇： post参数的值为一段路径，传到后端时反斜杠都被过滤掉，这个有关问题如何解决

下一篇： PHP抓取和分析_PHP

推荐阅读