jquery的trigger和triggerHandler区别
测试代码：
<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的返回值!