为什么要用trigger() ?
相信刚开始接触大家也都有这样的想法:比如前台页面里有:<p id="p1">请点击这里!</p> ,你希望加载页面时就执行这个事件给这个这p绑定了click事件(将下面的代码写在$(function(){});里面):
$("#p1").click(function(){
alert("hello!");
});
如果用trigger(),你就要写成这样:
$("#p1").click(function(){
alert("hello!");
}).trigger(click);
这样写不是更加麻烦了吗?可以这么说,但是用trigger()最大的好处就是它是可以传递参数进去的。例如:
//myEvent为自定义事件名
$("#p1").bind("myEvent",function(event,str1,str2) {
alert(str1 + ' ' + str2);
});
$("#p1").trigger("myEvent",["Hello","World"]);
也可以这样写:
$("#p1").bind("myEvent",function(event,str1,str2){
alert(str1 + ' ' + str2);
}).trigger("myEvent",["Hello","World"]);
1、trigger()
trigger()函数用于在每个匹配元素上触发指定类型的事件。
语法:$(selector).trigger(event,[param1,param2,...])
trigger()函数的返回值为jQuery类型,返回当前jQuery对象本身。
参数 | 描述 |
event | 必需。规定指定元素要触发的事件。 可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。 |
[param1,param2,...] | 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。 |
使用 Event 对象来触发事件:
语法:$(selector).trigger(eventObj)
参数 | 描述 |
eventObj | 必需。规定事件发生时运行的函数。 |
Eg:基本触发&自定义事件
- <span style="font-size:18px;"><html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-
- <script type="text/javascript">
- $(document).ready(function (){
- $('#button1').click(function(){
- alert('button1');
- $('#button2').trigger('click'); //点击1的时候,触发2
- });
-
- $('#button2').click(function(){
- alert('button2');
- $("#button3").trigger("myEvent",["Hello","World!"]); //点击2的时候,触发3
- });
-
- $("#button3").bind("myEvent", function (event,message1, message2) { //自定义事件myevent
- alert(message1 + ' ' +message2);
- });
- });
- </script>
-
- </head>
- <body style="text-align:center;">
- <divstyledivstyle="margin-top:130px;">
- <buttonidbuttonid='button1'>click1</button>
- <buttonidbuttonid='button2'>click2</button>
- <buttonidbuttonid='button3'>click3</button>
- </div>
- </body>
- </html> </span>
结果:点击button1时,先弹出内容“button1”,再弹出内容“button2”,再弹出“Hello World!”;点击button2时,先弹出内容“button2”,再弹出内容“Hello World!”;点击button3无内容弹出。
解释:代码中,给button1添加click事件,先alert('button1'),再触发button2的click事件;在button2的click事件中,先alert('button2'),再触发button3的myEvent事件,该事件是自定义事件,传入了两个参数:"Hello"和"World!";button3绑定的是自定义事件:myEvent事件,该事件要alert显示传入的参数,并中间以空格隔开,参数message1对应"Hello",参数message2对应"World!";button3并没有设置click事件,所以点击button3当然没有反应了。
2、triggerHandler()
triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。
语法:$(selector).triggerHandler(event,[param1,param2,...])
triggerHandler()函数的返回值为任意类型,返回触发执行的事件处理函数的返回值。
参数 | 描述 |
event | 必需。规定指定元素要触发的事件。 |
[param1,param2,...] | 可选。传递到事件处理程序的额外参数。 |
3、不同
- triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为,表单submit事件默认的提交行为)。
- .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
- 由.triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
- triggerHandler()的返回值是对应事件处理函数的返回值,而不是当前jQuery对象本身。此外,如果没有处理程序被触发,则这个方法返回 undefined。
4、实例
Eg1:trigger会触发事件冒泡,而triggerHandler则不会。
- <span style="font-size:18px;"><!DOCTYPE html>
- <html>
- <head>
- <metacharsetmetacharset="utf-8">
- <title></title>
-
- <script type="text/javascript" src="../jquery-3.1.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#outA").click(function(){
- alert("A");
- });
- $("#outB").click(function(){
- alert("B");
- });
- $("#outC").click(function(){
- alert("C");
- });
- // 使用trigger,依次C、B、A
- $("#outC").trigger("click");
- // 使用trigger,只会打印出C
- $("#outC").triggerHandler("click");
- });
- </script>
- </head>
- <body>
- <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
- <div id="outB" style="height:200px;background:#0000ff;top:20px;position:relative;">
- <div id="outC" style="height:100px;background:#FFB90F;top:250px;position:relative;"></div>
- </div>
- </div>
- </body>
- </html></span>
Eg2:triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数,而trigger则触发所有对象的事件处理函数。
- <span style="font-size:18px;"><!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
-
- <script type="text/javascript" src="../jquery-3.1.1.js"></script>
- <script type="text/javascript">
- $(function(){
- // 给按钮绑定click事件处理函数
- $("input[type=button]").click(function(event){
- alert($(this).attr("id"));
- });
- // 选中的button集合中,只触发第一个button的click事件,只打印出1
- // $("input[type=button]").triggerHandler("click");
- // 选中的button集合中,触发所有button的click,打印出1,2,3
- $("input[type=button]").trigger("click");
- });
- </script>
- </head>
- <body>
- <input type="button" id="1" value="1" />
- <input type="button" id="2" value="2" />
- <input type="button" id="3" value="3" />
- </body>
- </html></span>
Eg3:trigger会触发事件的默认行为,triggerHandler则会阻止事件的默认行为。
- <span style="font-size:18px;"><!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script type="text/javascript"src="../jquery-3.1.1.js"></script>
- <script type="text/javascript">
- $( document).ready(function() {
- $("input[type='checkbox']").bind("click",function(){
- $("#test").val("www.baidu.com");
- });
- });
- function bntClick(){
- //当点击checkbox的时候,checkbox勾上并将input[type='text']赋值www.baidu.com;
- //当点击 input[type='button']的时候就会发生跟点击checkbox同样的事情。
- $("input[type='checkbox']").trigger("click");
- //将trigger换成triggerHandler时候,当点击 input[type='button']的时候,就只会给input[type='text']赋值,而不会勾选checkbox。
- //因为triggerHandler 阻止了绑定事件的元素的默认行为
- //$("input[type='checkbox']").triggerHandler("click");
- }
- </script>
- </head>
- <body>
- <input type="checkbox" />
- <input type="text" id="test"/>
- <input type="button" value="button" id="bnt" onclick="bntClick()"/>
- </body>
- </html></span>
Eg3:trigger会触发事件的默认行为,triggerHandler则会阻止事件的默认行为。
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script type="text/javascript" src="../jquery-3.1.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#old").click(function(){
- $("input").trigger("focus");
- });
- $("#new").click(function(){
- $("input").triggerHandler("focus");
- });
- $("input").focus(function(){
- $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
- });
- });
- </script>
- </head>
- <body>
- <input type="text" />
- //点击第一个按钮,文本框获得焦点且在button的后面出现文字“Focused”,1秒后文字消失。
- <button id="old">trigger</button>
- //点击第二个按钮,在button的后面出现文字“Focused”,1秒后文字消失,文本框不会获得焦点。
- <button id="new">triggerHandler</button>
- </body>
- </html>
Eg4:trigger和triggerHandler在触发事件的时候都可以自定义参数。
- <span style="font-size:18px;"><!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <span style="white-space:pre"> </span> <script type="text/javascript" src="../jquery-3.1.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#btn").click(function(event,a, b){
- alert(a);
- alert(b);
- });
- // 普通的点击事件时,a和b是undefined类型
- // $("#btn").click();
- // $("#btn").trigger("click",["第一个参数","第二个参数"]);
- $("#btn").triggerHandler("click",["第一个参数","第二个参数"]);
- //加载页面后会分别弹出字符串“第一个参数”,“第二个参数”,如果点击button,则会弹出两个undefined。因为点击button引发的是button的click方式,此时传入的参数a和b并没有实际意义,click()不能自定义参数。
- });
- </script>
- </head>
- <body>
- <input type="button" id="btn" value="click">
- </body>
- </html></span>