jQuery之trigger()/triggerHandler()

最新推荐文章于 2023-06-17 17:25:15 发布

IronLavender

最新推荐文章于 2023-06-17 17:25:15 发布

阅读量778

点赞数

分类专栏：前端开发技术文章标签： jQuery trigger triggerHandler

本文链接：https://blog.csdn.net/wumenglu1018/article/details/61914173

版权

前端开发技术专栏收录该内容

13 篇文章 2 订阅

订阅专栏

为什么要用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：基本触发&自定义事件

<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;"> 
    <divstyle="margin-top:130px;"> 
        <buttonid='button1'>click1</button> 
        <buttonid='button2'>click2</button> 
        <buttonid='button3'>click3</button> 
    </div> 
</body> 
</html>

结果：点击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则不会。

<!DOCTYPE html>
<html>
<head>
         <metacharset="utf-8">
         <title></title>
         <!-- trigger会触发事件冒泡，而triggerHandler则不会。 -->
    <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>

Eg2：triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数，而trigger则触发所有对象的事件处理函数。

<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <title></title>
         <!-- triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数，而trigger则触发所有对象的事件处理函数。 -->
    <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>

Eg3：trigger会触发事件的默认行为，triggerHandler则会阻止事件的默认行为。

<!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>

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在触发事件的时候都可以自定义参数。

<!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(){ 
                       $("#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>	 <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>

参考来源：

http://www.jb51.net/article/49164.htm

http://blog.csdn.net/aitangyong/article/details/43309467

http://www.cnblogs.com/shanlin/archive/2011/08/03/2126325.html