trigger和triggerHander的区别

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

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. // 绑定事件的时候不自定义参数  
  2. $("#button").bind("click",function(event){    
  3.     alert("clicked");  
  4. });    
  5.   
  6. // 使用自定义参数  
  7. $("#button").bind("click",{name:"aty"}, function(event){    
  8.      alert("params=" + event.data.name);    
  9. });  

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

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

1. 会产生事件冒泡

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

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


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

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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>    
  2.         
  3.     $(function(){    
  4.         
  5.         $("#outA").click(function(){    
  6.             alert("A");    
  7.         });    
  8.             
  9.         $("#outB").click(function(){    
  10.             alert("B");    
  11.         });    
  12.             
  13.         $("#outC").click(function(){    
  14.             alert("C");    
  15.         });   
  16.           
  17.         // 使用trigger,依次C、B、A  
  18.         $("#outC").trigger("click");  
  19.           
  20.         // 使用trigger,只会打印出C  
  21.         $("#outC").triggerHandler("click");  
  22.     });    
  23.         
  24. </script>    
  25.     
  26. <body>    
  27.     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">    
  28.         <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">    
  29.             <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>     
  30.         </div>    
  31.     </div>    
  32. </body>    


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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2. $(function(){  
  3.   
  4.     // 给按钮绑定click事件处理函数  
  5.     $("input[type=button]").click(function(event){  
  6.         alert($(this).attr("id"));  
  7.     });  
  8.       
  9.     // 选中的button集合中,只触发第一个button的click事件,只打印出1  
  10.     $("input[type=button]").triggerHandler("click");  
  11.       
  12.     // 选中的button集合中,触发所有button的click,打印出1,2,3  
  13.     $("input[type=button]").trigger("click");  
  14.   
  15. })  
  16. </script>  
  17. <body>  
  18.     <input type="button" id="1">  
  19.     <input type="button" id="2">  
  20.     <input type="button" id="3">  
  21. </body>  


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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2. $(function(){  
  3.   
  4.     $("#btn-trigger").click(function(event){  
  5.         $("#text1").trigger("focus");  
  6.     });  
  7.       
  8.     $("#btn-triggerHandler").click(function(event){  
  9.         $("#text2").triggerHandler("focus");  
  10.     });  
  11.   
  12. })  
  13. </script>  
  14. <body>  
  15.     <input type="text" id="text1" tabIndex="0">  
  16.     <input type="text" id="text2" tabIndex="1">  
  17.     <input type="button" id="btn-trigger" value="trigger" tabIndex="2">  
  18.     <input type="button" id="btn-triggerHandler" value="triggerHandler" tabIndex="3">  
  19. </body>  

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


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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2. $(function(){  
  3.   
  4.     $("#btn").click(function(event, a, b){  
  5.         alert(a);  
  6.         alert(b);  
  7.     });  
  8.       
  9.     // 普通的点击事件时,a和b是undefined类型  
  10.     $("#btn").click();  
  11.       
  12.     // trigger或triggerHandler,a是foo, b是bar  
  13.     $("#btn").trigger("click",["foo","b是bar"]);  
  14.   
  15. })  
  16. </script>  
  17. <body>  
  18.     <input type="button" id="btn" value="click">  
  19. </body>  


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


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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2. $(function(){  
  3.   
  4.     $("#btn").bind("click",function(){  
  5.         alert("no");  
  6.     });  
  7.   
  8.     $("#btn").bind("click.a",function(){  
  9.         alert("a");  
  10.     });  
  11.       
  12.     $("#btn").bind("click.b",function(){  
  13.         alert("b");  
  14.     });  
  15.       
  16.     // 打印no  
  17.     $("#btn").trigger("click!");  
  18.       
  19.     // 打印no,a,b  
  20.     $("#btn").trigger("click");  
  21.       
  22.     // 打印a  
  23.     $("#outA").trigger("click.a");  
  24.       
  25.     // 无打印  
  26.     $("#outA").trigger(".a");  
  27.   
  28. })  
  29. </script>  
  30. <body>  
  31.     <input type="button" id="btn" value="click">  
  32. </body>  
通过输出结果,可以得出以下结论:

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

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

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

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


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值