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,會有返回值.