读jQuery之十四 （触发事件核心方法）

在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。如下

…
dispatch = w3c ?
function(el, type){
try{
var evt = document.createEvent(‘Event’);
evt.initEvent(type,true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
} :
function(el, type){
try{
el.fireEvent(‘on’+type);
}catch(e){alert(e)}
};
…

jQuery则完全没有用到dispatchEvent/fireEvent方法。它采用的是另外一种机制。
jQuery触发事件的核心方法是jQuery.event.trigger。它提供给客户端程序员使用的触发事件方法有两个：.trigger/.triggerHandler

一个事件的发生在某些元素中可能会导致两种动作，一个是默认行为，一个是事件handler。如链接A
<a href=”http://mail.sina.com.cn” onclick=”alert(1);”>新浪邮箱</a>
点击后，弹出1（事件handler），点确定跳转（默认行为）到了mail.sina.com.cn。因此，设计的触发事件的函数要考虑到这两种情况。
jQuery使用.trigger和.triggerHandler区分了这两种情况：
.trigger 执行事件hanlder/执行冒泡/执行默认行为
.triggerHandler 执行事件handler/不冒泡/不执行默认行为

.trigger/.triggerHandler的源码如下
trigger: function( type, data ) {
return this.each(function() {
jQuery.event.trigger( type, data, this );
});
},
triggerHandler: function( type, data ) {
if ( this[0] ) {
return jQuery.event.trigger( type, data, this[0], true );
}
},

可以看出，两者都调用jQuery.event.trigger。调用时一个没有传true，一个传了。传了true的triggerHander就表示仅执行事件handler。
此外还需注意一点区别：.trigger是对jQuery对象集合的操作，而.triggerHandler仅操作jQuery对象的第一个元素。如下

<p>p1</p>
<p>p1</p>
<p>p1</p>
<script>
$(‘p’).click(function(){alert(1)});
$(‘p’).trigger(‘click’); // 弹3次，即三个p的click都触发了
$(‘p’).triggerHandler(‘click’); // 仅弹1次，即只触发第一个p的click
</script>

好了，是时候贴出jQuery.event.trigger的代码了

trigger: function( event, data, elem, onlyHandlers ) {
// Event object or event type
var type = event.type || event,
namespaces = [],
exclusive;
……
}

这就是jQuery.event.trigger的定义，省略了大部分。下面一一列举

if ( type.indexOf(“!”) >= 0 ) {
// Exclusive events trigger only for the exact event (no namespaces)
type = type.slice(0, -1);
exclusive = true;