在 事件模块的演变 我使用了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)} };
在JavaScript的世界里，事件处理是页面交互的关键部分。在jQuery库中，事件处理被封装得非常优雅和方便。本文将深入探讨jQuery中的事件触发机制，特别是`jQuery.event.trigger`这个核心方法，以及与之相关的`.trigger`和`.triggerHandler`。
我们需要了解在浏览器的原生API中，有`dispatchEvent`（W3C标准）和`fireEvent`（IE特有）两种方法用于手动触发事件。然而，在jQuery中，并没有直接使用这两个原生方法。相反，jQuery使用了自定义的事件触发机制，主要通过`jQuery.event.trigger`这个内部函数来实现。
`.trigger`和`.triggerHandler`是jQuery提供给用户触发事件的两种方式。`.trigger`不仅执行事件处理器，还允许事件冒泡（即事件从当前元素向上冒泡到其父元素）并执行默认行为。例如，点击一个链接会同时触发事件处理器并跳转到链接的目标地址。`.triggerHandler`则不同，它只执行事件处理器，不进行事件冒泡，也不会执行默认行为。这对于需要精确控制事件处理的场景非常有用。
让我们看看`.trigger`和`.triggerHandler`的源码：
```javascript
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`，但是`.triggerHandler`多传了一个`true`参数，表示仅执行事件处理器。此外，`.trigger`作用于jQuery对象集合的每个元素，而`.triggerHandler`只作用于集合的第一个元素。
现在，我们来看`jQuery.event.trigger`的代码，虽然这里只展示了部分，但我们可以看到它处理各种情况，比如检查事件类型是否包含感叹号（`!`），这表示“专属事件”，即不考虑事件命名空间。例如，`'click!'`会触发不带命名空间的点击事件。
```javascript
if ( type.indexOf(“!”) >= 0 ) {
type = type.slice(0, -1);
exclusive = true;
}
```
这段代码是用来处理这种专属事件的，它会在后续的事件处理过程中起到关键作用，确保只执行特定的事件处理器。
除此之外，`jQuery.event.trigger`还会处理事件命名空间，例如`'click.a'`，这样可以绑定多个相同类型的事件，但具有不同的命名空间，从而在触发时可以选择性地执行特定的事件处理器。
总结来说，jQuery的事件触发机制提供了一套灵活且强大的工具，使得开发者能够轻松地控制页面上的事件处理。`.trigger`和`.triggerHandler`作为两个主要的触发方法，分别满足了不同的需求，使得在执行事件处理器、冒泡和默认行为之间找到了良好的平衡。通过深入理解这些内部工作原理，我们可以更好地利用jQuery来创建交互丰富的Web应用。
