jquery的trigger和triggerHandler区别

2015年6月10日21:42:39 发表评论 已收录

测试代码:

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
</head>  
<body>   
第一个:<input type="checkbox"  />   
第二个:<input type="checkbox" />   
第三个:<input type="checkbox" />   
<input type="text" id="test"/>   
<input type="button" value="button" id="bnt" onclick="bntClick()"/>   
<script>   
$( document ).ready(function() {   
$("input[type='checkbox']").bind("click",function(){   
    
   //alert("come");  
   return 10;  
});   
  
   });  
function bntClick(){   
   var x=$("input[type='checkbox']").trigger("click");   
    alert(x.length);//trigger时候,这里返回了的是checkbox的个数,也就是3  
    alert(x instanceof jQuery);//  
}   
</script>   
</body>  
</html>

测试总结:

1)因为这里有三个checkbox,但是你发现trigger调用了三次alert(调用集合中所有的对象的事件);同时checkbox前面会打勾(不阻止浏览器默认行为);trigger()函数的返回值为jQuery类型,返回当前jquery对象本身。

2)但是把它换成triggerHandler只是调用了一次alert(只调用jquery集合中第一个元素的事件处理函数,所以只调用一次,并且不冒泡);而且checkbox前面没有打勾(阻止浏览器默认行为);triggerHandler返回值是时间处理函数的返回值,不是jquery对象

从源码出发来解释两者的区别:

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 );  
        }  
    }

通过源码你应该学会:

(1)triggerHandler只是调用第一个元素的同类事件,而trigger会调用所有的元素的同类事件,这是为什么trigger会弹出三次,而triggerHandler只会弹出一次。

 

(2)我这里只是给出结论,因为jQuery.event.trigger第四个参数是true,表示只会调用目标对象的相关的事件,而不会冒泡。因此triggerHandler不会冒泡,而trigger会冒泡。见下例:

HTML部分

<div id="father"  style="width:100%;height:200px;background-color:#ccc;">  
  <div id="child" style="width:100%;height:100px;background-color:red;"></div>  
</div>

JS部分

$("#child").on("click",function(e){console.log("child click");});  
$("#father").on("click",function(e){console.log("father click");});  
$("#child").triggerHandler("click");  
//这时候只会打印'child click',如果把他改成trigger那么打印['chilc click','father click']

因此,triggerHandler不冒泡,而trigger会冒泡!

(3)为什么triggerHandler会阻止默认行为

if ( !onlyHandlers && !event.isDefaultPrevented() ) {  
        if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&  
            jQuery.acceptData( elem ) ) {  
            // Call a native DOM method on the target with the same name name as the event.  
            // Can't use an .isFunction() check here because IE6/7 fails that test.  
            // Don't do default actions on window, that's where global variables be (#6170)  
            if ( ontype && elem[ type ] && !jQuery.isWindow( elem ) ) {  
                // Don't re-trigger an onFOO event when we call its FOO() method  
                tmp = elem[ ontype ];  
                if ( tmp ) {  
                    elem[ ontype ] = null;  
                }  
                // Prevent re-triggering of the same event, since we already bubbled it above  
                jQuery.event.triggered = type;  
                try {  
                    elem[ type ]();//调用默认行为  
                } catch ( e ) {  
                    // IE<9 dies on focus/blur to hidden element (#1486,#12518)  
                    // only reproducible on winXP IE8 native, not IE9 in IE8 mode  
                }  
                jQuery.event.triggered = undefined;  
                if ( tmp ) {  
                    elem[ ontype ] = tmp;  
                }  
            }  
        }  
    }

如果你理解了jQuery.event.trigger,你就会理解上面的if语句了,如果是triggerHandler那么这个if不会执行,而这个里面的代码正是调用浏览器默认行为。因为elem[type]()就是调用默认行为!执行下面的代码你就会明白:

var result=$("#child")[0]['click'];  
console.log(result);//该click是native code!

(4)至于为什么两者的返回值不同很容易理解的

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

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: