JQuery通过简单示例比较trigger()与triggerHandler()的区别
在制作网页特效时，我们有时会需要使用到模拟操作，即模拟人工手动操作。这时，我们会想到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页面。
然后，在之间添加发下 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()的区别的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
小米14 Pro怎么开启nfc功能？
Mar 19, 2024 pm 02:28 PM
如今手机的性能和功能越来越强大，几乎所有手机都配备了便捷的NFC功能，方便用户进行移动支付和身份认证。然而，有些小米14Pro的用户可能不清楚如何启用NFC功能。接下来，让我详细向大家介绍一下。小米14Pro怎么开启nfc功能？步骤一：打开手机的设置菜单。步骤二：找到并点击“连接和共享”或“无线和网络”选项。步骤三：在连接和共享或无线和网络菜单中，找到并点击“NFC和支付”。步骤四：找到并点击“NFC开关”。一般情况下，默认是关闭的状态。步骤五：在NFC开关页面上，点击开关按钮，将其切换为开启状
WPS Word怎么设置行距让文档更工整
Mar 20, 2024 pm 04:30 PM
WPS是我们常用的办公软件，在进行长篇文章的编辑时，经常会因为字体太小而看不清楚，所以会对字体和整个文档进行调整。例如：把文档进行行距的调整，会让整个文档变得非常清晰，我建议各位小伙伴们都要学会这个操作步骤，今天就分享给大家，具体的操作步骤如下，快来看一看！打开要调整的WPS文本文件，在【开始】菜单中找到段落设置工具栏，你会看到行距设置小图标（如图中红色线圈所示）。2、点击行距设置右下角的小倒三角形，会出现相应的行距数值，可以选择1～3倍行距（如图箭头所示）。3、或者点击鼠标右键点击段落，就会出
华为 Pocket2怎么隔空刷抖音？
Mar 18, 2024 pm 03:00 PM
隔空滑动屏幕是华为的一项功能，在华为mate60系列中可以说是备受好评，这个功能是通过利用手机上的激光感应器和前置摄像头的3D深感摄像头，来完成一系列不需要触碰屏幕的功能，比如说隔空刷抖音，但是华为Pocket2应该要怎么隔空刷抖音呢？华为Pocket2怎么隔空截图？1、打开华为Pocket2的设置2、然后选择【辅助功能】。3、点击打开【智慧感知】。4、打开【隔空滑动屏幕】、【隔空截屏】、【隔空按压】开关就可以了。5、在使用的时候，需要再距离屏幕20~40CM处，张开手掌，待屏幕上出现手掌图标，
iPhone 16 Pro CAD 图曝光 加入第二个新按键
Mar 09, 2024 pm 09:07 PM
iPhone16Pro的CAD文件已经曝光，设计与先前的传闻一致。去年秋天，iPhone15Pro新增了Action按钮，而今年秋天，Apple似乎计划对这款硬件的尺寸进行微小的调整。加入Capture按钮据传言，iPhone16Pro可能会新增第二个新按钮，这将是继去年之后连续第二年增加新按钮。传闻称新的Capture按钮将被设置在iPhone16Pro的右下侧，这一设计有望让相机控制更加便捷，同时还能让Action按钮用于其他功能。这个按钮将不再仅仅是一个普通的快门按钮。关于相机，从目前iP
Go语言的缩进规范及示例
Mar 22, 2024 pm 09:33 PM
Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言，它以简洁、清晰的语法着称，其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范，并通过具体的代码示例进行详细说明。缩进规范在Go语言中，缩进使用制表符（tab）而非空格。每级缩进为一个制表符，通常设置为4个空格的宽度。这样的规范统一了代码风格，使得团队合作编
Oracle DECODE函数详解及用法示例
Mar 08, 2024 pm 03:51 PM
Oracle中的DECODE函数是一种条件表达式，常用于在查询语句中根据不同的条件返回不同的结果。本文将详细介绍DECODE函数的语法、用法和示例代码。一、DECODE函数语法DECODE(expr,search1,result1[,search2,result2,...,default])expr：要进行比较的表达式或字段。search1,
C语言与PHP的区别及比较分析
Mar 20, 2024 am 08:54 AM
C语言与PHP的区别及比较分析C语言和PHP都是常见的编程语言，但它们在许多方面有着明显的区别。本文将对C语言和PHP进行比较分析，并通过具体的代码示例来说明它们之间的差异。一、语法和用途：C语言：C语言是一种面向过程的编程语言，主要用于系统级编程和嵌入式开发。C语言的语法相对较为简洁和底层，能够直接操作内存，具有高效性和灵活性。C语言强调程序员对程序的完全
TrendX 研究院：Merlin Chain 项目分析及生态盘点
Mar 24, 2024 am 09:01 AM
根据3月2日数据统计，比特币二层网络MerlinChain总TVL已达30亿美元。其中比特币生态资产占比达90.83%，包括价值15.96亿美元的BTC以及4.04亿美元的BRC-20资产等。上一个月，MerlinChain在开启质押活动14天内，其TVL总额就已经达到了19.7亿美元，超过了去年11月份上线也是最近同样引人注目的Blast。2月26日，MerlinChain生态内的NFT总价值超过了4.2亿美元，成为除以太坊以外NFT市值最高的公链项目。项目简介MerlinChain是OKX支
