黑马程序员技术交流社区
标题: 【黑马程序员杭州】JQuery中trigger和triggerHandler的区别 [打印本页]
作者: 鱼丸儿 时间: 2017-12-21 22:25
标题: 【黑马程序员杭州】JQuery中trigger和triggerHandler的区别
今天我们来聊聊JQuery中常用的事件处理函数trigger和triggerHandler的用法和区别。
这两个函数可以理解为事件触发器，那么怎么理解这个事件触发器呢？我们举个例子，假如我界面上有个按钮A，我们通过给A绑定一个click事件，那么这个click事件如果想要触发执行，就需要我们通过鼠标手动去点击按钮A；那现在假如有个需求是界面一加载完就需要执行按钮A的click事件，这时候就需要一个界面内的主动触发器去触发A的click事件，那这时候我们的trigger和triggerHandler就可以派上用场了，他们的用法很简单：
[JavaScript] 纯文本查看 复制代码
$(A).trigger(“click”);
$(A).triggerHandler(“click”);
上面两个函数都可以完成界面进入触发函数的需求,那么这两个函数究竟有什么区别呢？
通过JQuery文档，我们可以总结出三点区别：
① trigger函数会触发所有界面中通过JQuery过滤器能匹配的元素的同名事件
triggerHandler函数只会触发JQuery过滤器能匹配的元素集中第一个元素的同名函数
② trigger函数在执行完JQuery过滤器匹配的元素集的同名函数后，会执行浏览器的默认同名函数行为
triggerHandler函数则不会执行浏览器的默认同名函数行为
③ trigger函数支持事件的冒泡行为（所谓事件冒泡是指子元素的事件执行后，会触发其父容器元素的同名事件）
triggerHandler则不支持事件的冒泡行为
ok，那么接下来，我们以案例的方式来解释上述三点的不同：
[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trigger和TriggerHandler区别</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#content").focus(function(){
$(this).val("Hello");
});
$("#content1").focus(function(){
$(this).val("Hello");
});
$("#content2").focus(function(){
$(this).val("Hello");
});
$("#but1").click(function(){
$(":text").trigger("focus");
});
$("#but2").click(function(){
$(":text").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="text" id="content" name="test"/>
<input type="text" id="content1" name="test"/>
<input type="text" id="content2" name="test"/>
<input type="button" id="but1" value="trigger">
<input type="button" id="but2" value="triggerHandler">
</body>
</html>
以上是我们演示区别①和区别②的案例代码，在界面中有三个文本输入框，和两个按钮，那么在js代码中，分别给三个文本绑定获取焦点的事件，在文本框获取焦点后，执行函数向各自文本框中输入Hello文本，两个按钮，绑定点击事件，在点击按钮触发的函数中，使用JQuery过滤到三个文本框，然后分别用trigger和triggerHandler的方式触发focus事件，接下来我们可以观看结果：
从上图可以看到，我们点击trigger按钮通过trigger函数触发的focus事件，在JQuery过滤器匹配到的三个文本框元素都执行了focus事件，在三个文本框中都显示了Hello文本，并且第三个文本框的边框以高亮的方式显示，这说明执行完三个文本框的focus事件后，执行了浏览器默认的focus行为，将焦点定位到第三个文本框中。
那么接下来我们看看通过triggerHandler触发focus事件的效果：
从上图可以看到，JQuery过滤器匹配的三个文本框中，只有第一个文本框的focus事件被触发，后面两个匹配的元素的focus事件并没有被触发，并且第一个文本框的边框并没有被高亮显示，说明并没有执行浏览器默认的focus行为。
Ok，通过以上案例的两个运行结果，就可以很好的理解trigger和triggerHandler的区别①和②了。
接下来我们通过另外一个案例来给大家演示他们的区别③--对冒泡的支持不同。
[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#outA").click(function(){
alert("A");
});
$("#outB").click(function(){
alert("B");
});
$("#outC").click(function(){
alert("C");
});
$("#outC").trigger("click");
// $("#outC").triggerHandler("click");
});
</script>
</head>
<body>
<div id="outA" style="width:400px; height:400px; background:red;position:relative;">
<div id="outB" style="height:200px; background:green;top:100px;position:relative;">
<div id="outC" style="height:100px; background:yellow;top:50px;position:relative;">
</div>
</div>
</div>
</body>
</html>
以上为输出的结果，会连续弹出C—B—A三个弹框，这说明我们触发了outC的click事件后，又触发了其父容器元素outB的click事件，而outB的click事件执行后，又触发了其父容器元素outA的click事件，这种结果不正是我们所说的事件冒泡嘛！
测试二：以triggerHandler函数触发outC的click事件
以上为输出结果，此时只会弹出C弹框，这说明triggerHandler不支持事件的冒泡行为。
如果执行 $("div").trigger("click");你是否能说明弹框弹出的顺序呢？
至此，咱们就介绍完了trigger和triggerHandler的用法和区别，大家是否对这两个事件处理函数有了一个更加清晰的认识呢，那么在实际开发中，你是否能够根据需求，很好的选择他们来满足你的需求呢？
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
