jQuery的trigger和triggerHandler

一、trigger()方法触发被选元素的指定事件类型

$("button").click(function(){
  $("input").trigger("select");
})

语法

$(selector).trigger(event,[param1,param2,....]);

参数

event  必需。规定指定元素要触发的事件。可以使用自定义事件(使用bind()函数来附加,或者任何标准事件);

[param1,param2,....]  可选。传递到事件处理程序的额外参数(对自定义事件特别有用)。

二、triggerHandler()语法和参数与trigger()相同,但是它们之间会有些区别。

1.trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只会影响匹配到的第一个元素。

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

2.由triggerHandler()创建的事件不会在DOM树种冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

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

3.trigger会触发事件的默认行为,而triggerHandler则不会(如表单提交)。

4.triggerHandler的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象(trigger)。此外,如果没有处理程序被触发,则这个方法返回 undefined。

trigger源码:

trigger: function( type, data ) {  
    //对每一个元素都调用jQuery.event.trigger  
    return this.each(function() {  
        jQuery.event.trigger( type, data, this );  
    });  
}  

triggerHandler源码

triggerHandler: function( type, data ) {  
    var elem = this[0];  
    //只有第一个元素调用jQuery.event.trigger,同时第四个参数是true  
    //表示只是会调用一次  
    if ( elem ) {  
        return jQuery.event.trigger( type, data, elem, true );  
    }  
}

因为trigger调用了each方法,该方法虽然遍历了所有的调用对象然后执行指定的函数,但是他的返回值依然是调用对象!但是triggerHandler没有调用each方法,而是直接调用了第一个元素的事件,所以他的返回值就是jQuery.event.trigger的返回值!

posted @ 2017-03-16 13:05  家猪难养  阅读(436)  评论(0编辑  收藏  举报