trigger和triggerHander的区别

最新推荐文章于 2020-06-07 11:45:32 发布

奋斗的IT菜鸟

最新推荐文章于 2020-06-07 11:45:32 发布

阅读量810

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面这段js代码给button绑定了click事件处理函数，第一种是我们最常用的做法；第二种使用了自定义参数。

[javascript]view plaincopy 
   
 // 绑定事件的时候不自定义参数  
 $("#button").bind("click",function(event){    
     alert("clicked");  
 });    
   
 // 使用自定义参数  
 $("#button").bind("click",{name:"aty"}, function(event){    
      alert("params=" + event.data.name);    
 });  

如果我们想手动触发click事件，最常见的做法是通过$("#button").click()来触发，这种做法姑且叫方式一吧。

方式一触发事件有3个特点：

1. 会产生事件冒泡

2. 不会阻止事件在浏览器下的默认行为

3. 触发事件的时候，不能传递自定义参数

JQuery还允许我们使用trigger和triggerHandler手动触发事件，这2种方式有什么差别呢？下面我们来看一下。

1. trigger会触发事件冒泡，而triggerHandler则不会。这一点上trigger与方式一是一致的。

[html]view plaincopy 
   
 <script>    
         
     $(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>    
     
 <body>    
     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">    
         <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">    
             <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>     
         </div>    
     </div>    
 </body>    

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

[html]view plaincopy 
   
 <script>  
 $(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>  
 <body>  
     <input type="button" id="1">  
     <input type="button" id="2">  
     <input type="button" id="3">  
 </body>  

3. trigger会触发事件的默认行为，triggerHandler则会阻止事件的默认行为。这一点上trigger与方式一相同。

[html]view plaincopy 
   
 <script>  
 $(function(){  
   
     $("#btn-trigger").click(function(event){  
         $("#text1").trigger("focus");  
     });  
       
     $("#btn-triggerHandler").click(function(event){  
         $("#text2").triggerHandler("focus");  
     });  
   
 })  
 </script>  
 <body>  
     <input type="text" id="text1" tabIndex="0">  
     <input type="text" id="text2" tabIndex="1">  
     <input type="button" id="btn-trigger" value="trigger" tabIndex="2">  
     <input type="button" id="btn-triggerHandler" value="triggerHandler" tabIndex="3">  
 </body>  

点击trigger按钮，text1会获取焦点，边框高亮，变成了可以输入的状态；而点击triggerHandler按钮，text2没有任何反应，因为focus事件的默认行为被阻止了。特别注意：最开始我是使用<a>标签的click事件进行测试的，因为超链接被点击的事件默认行为就是跳到新的URL或者锚点。但测试结果是：使用trigger和triggerHandler表现都是一致的，都没有打开新的URL。原因是：由于浏览器中链接的安全性限制，jQuery对链接的默认行为都统一为不触发，所以trigger不能触发。

4. trigger和triggerHandler在触发事件的时候都可以自定义参数，而方式一不行。

[html]view plaincopy 
   
 <script>  
 $(function(){  
   
     $("#btn").click(function(event, a, b){  
         alert(a);  
         alert(b);  
     });  
       
     // 普通的点击事件时，a和b是undefined类型  
     $("#btn").click();  
       
     // trigger或triggerHandler,a是foo, b是bar  
     $("#btn").trigger("click",["foo","b是bar"]);  
   
 })  
 </script>  
 <body>  
     <input type="button" id="btn" value="click">  
 </body>  

5. trigger和triggerHandler函数的返回值不同。这个不重要，实际开发中也没有什么意义。你可以结果JQuery的API文档，自己写代码测试下。

6. trigger和triggerHandler都支持事件命名空间，在命名空间上的表现也完全一致。

[html]view plaincopy 
   
 <script>  
 $(function(){  
   
     $("#btn").bind("click",function(){  
         alert("no");  
     });  
   
     $("#btn").bind("click.a",function(){  
         alert("a");  
     });  
       
     $("#btn").bind("click.b",function(){  
         alert("b");  
     });  
       
     // 打印no  
     $("#btn").trigger("click!");  
       
     // 打印no,a,b  
     $("#btn").trigger("click");  
       
     // 打印a  
     $("#outA").trigger("click.a");  
       
     // 无打印  
     $("#outA").trigger(".a");  
   
 })  
 </script>  
 <body>  
     <input type="button" id="btn" value="click">  
 </body>  

通过输出结果，可以得出以下结论:

a) 可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。

b) trigger(".a")这种写法不能触发任何事件，不能像unbind一样。

c) trigger("click.a")这种写法可以触发对应的事件处理函数。

d) trigger("click")触发所有click类型的事件处理函数。

转载地址：http://blog.csdn.net/aitangyong/article/details/43309467

奋斗的IT菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
trigger和triggerHander的区别

下面这段js代码给button绑定了click事件处理函数，第一种是我们最常用的做法；第二种使用了自定义参数。[javascript] view plain copy // 绑定事件的时候不自定义参数 $("#button").bind("click",function(event){ alert("clicked")
复制链接

扫一扫

专栏目录