trigger和triggerHandler的使用

今天琢磨了好久这个trigger和triggerHandler的用法.在网上搜了好多,不过大都是相互抄袭,毛意思都没有.后来自己做了研究.

trigger:

1.可以用来触发事件.

 <input id="guoyansi" value="单击" type="button" />

  $(function(){
                 $("#guoyansi").click(function(){
                     alert("点我干嘛");
                 });
                 //下面的两种情况都可以在页面加载完毕后自动触发
                 $("#guoyansi").click();
                 $("#guoyansi").trigger("click");

             })

2.可以用来传递参数trigger(typeEvent[,data]);

  <input id="guoyansi" value="单击" type="button" />

  $(function(){
                 $("#guoyansi").click(function(e,text){
                     text=text||"我是click触发的";
                     alert(text);
                 });
                 $("#guoyansi").trigger("click",["我是trigger触发的"]);

             })

3.传递多个参数:

 <input id="guoyansi" value="单击" type="button" />

 $(function(){
                 $("#guoyansi").click(function(e,m1,m2,m3){
                     var text="";
                     if(m1||m2||m3)  text=m1+","+m2+","+m3;
                     else  text="我是click触发的";
                     alert(text);
                 });
                 $("#guoyansi").trigger("click",["m1","m2","m3"]);

             })

4.自定义事件.

  <input id="guoyansi" value="单击" type="button" />
  <input type="text" id="guoTxt"/>

 $(function(){
                 $("#guoTxt").on("myEvent",function(){//给guoTxt自定义一个myEvent事件
                     alert($(this).val());
                 });
                 $("#guoyansi").click(function(){//单击guoyansi按钮时,触发我们的自定义事件
                     $("#guoTxt").trigger("myEvent");
                 });
             })

5.triggerHandler()的方法在作用上类似于trigger(),但是是有一定的区别的.

　　1.triggerHandler方法不会引起浏览器默认的行为,而仅仅是执行绑定到focus事件的处理程序.

 <input type="button" id="guo" value="trigger"/>
 <button type="button" id="yan"value="triggerHandler"/>
 <input id="si" type="text" />

  $(function(){
                     $("#guo").bind("click",function(){
                         $("#si").trigger("focus",["trigger"]);
                     });
                     $("#yan").bind("click",function(){
                         $("#si").triggerHandler("focus",["triggerHandler"]);
                     });
                     $("#si").bind("focus",function(e,handler){
                         if(typeof(handler)=="undefined") handler="用户操作";
                         $(this).val(handler);
                     });
                 })    

用谷歌浏览器测试,效果更明显.

单击文本框:

文本框中有光标,并且还有橙色边框.

单击trigger:

效果和单击文本框是一样的.

单击triggerHandler:

只是执行了focus的事件,文本框中没有光标,并且边框也没有变颜色.

　　2.trigger()对匹配到的所有元素进行操作,triggerHandler()只对第一个元素做处理.

 <input type="button" id="guo" value="trigger"/>
 <input type="button" id="yan" value="triggerHandler"/>
 <input class="si" type="text" />
 <input class="si" type="text" />
 <input class="si" type="text" />
 <input class="si" type="text" />

 $(function(){
      $("#guo").bind("click",function(){
          $(".si").trigger("focus",["trigger"]);
     });
      $("#yan").bind("click",function(){
          $(".si").triggerHandler("focus",["triggerHandler"]);
      });
      $(".si").bind("focus",function(e,handler){
         if(typeof(handler)=="undefined") handler="用户操作";
           $(this).val(handler);
      });
})     

单击trigger按钮:

单击triggerHandler按钮:

3:triggerHandler()方法不会发生冒泡,如果这些事件不被目标元素直接处理,则它什么事情都不做.

<input type="button" id="guo" value="trigger"/>
<input type="button" id="yan" value="triggerHandler"/>
<div class="father" style="width:200px; height:200px; background-color:black;">
     <div class="children" style="width:100px; height:100px; background-color:red;"></div>
</div>      

 $(function(){
                     $("#guo").bind("click",function(){
                         $(".children").trigger("click");
                     });
                     $("#yan").bind("click",function(){
                         $(".children").triggerHandler("click");
                     });
                     $(".father").click(function(){
                         alert("你单击了父div");
                     });
                     $(".children").click(function(){
                         alert("你单击了子div");
                     });
                 }) 

因为冒泡,单击了trigger按钮后,会弹出2个弹出框;因为不冒泡单击triggerHandler按钮,只会出现一个"你单击了子div"的弹出框.

3.triggerHandler()不返回jQuery对象,而是返回有这个方法的最后一个处理程序的返回值.如果没有返回值,则默认是undefined.

 <input type="button" id="guo" value="trigger"/>
 <input type="button" id="yan" value="triggerHandler"/>
 <div class="father" style="width:200px; height:200px; background-color:black;">
     <div class="children" style="width:100px; height:100px; background-color:red;"></div>
 </div>       

 $(function(){
                     $("#guo").bind("click",function(){
                         $(".children").trigger("click").css("background-color","blue");
                     });
                     $("#yan").bind("click",function(){
                         var a=$(".children").triggerHandler("click");
                         alert(a);
                     });
                     $(".father").click(function(){
                         alert("你单击了父div");
                     });
                     $(".children").click(function(){
                         alert("你单击了子div");
                         return "我来自triggerHandler的返回值";
                     });
                 })     

单击trigger后,红色会变成蓝色:

单击triggerHandler,会有返回值.