兼容IE和FF的手动触发事件，并自定义Event的属性值

场景：

         当我们给dom元素附加了一些事件，如click, mouseover, mouserout, keypress的时候， 此时此刻这些dom元素就会响应事件并执行我们注册的处理函数。

          可是有些时候，我们想模拟这些事件的触发，而并非真实的动作去触发它。 可不可以不点击按钮，而触发按钮的点击事件？ 当然是可以的，我们可以直接执行注册的点击事件函数。一切显得的都很自然，但有一个问题就是这样触发的事件函数并没有event对象，因为event是浏览器为我们生成的，所以这样的模拟是个遗憾。

 

解决办法：

        IE和标准的dom都考虑到了这个应用场景。各自实现了一套API。在看这套API前，想一下我们说希望的处理方法：

1. 首先，要创建一个我们自定义属性的Event对象
2. 其次，通过事件对象和事件名称触发这个事件，并且把我们定制的Event传入进去。
3. 事件对象获得event对象执行注册的处理函数

IE的实现：

1. event = document.createEventObject 可以创建一个Event对象， 自定义属性可以附加到这个对象上。 官方文档：http://msdn.microsoft.com/zh-cn/vcsharp/ms536390     
2. HTMLElement.fireEvent(事件类型， 事件对象[event]) 可以根据事件类型触发元素事件，并且可选传入事件对象(就是1所创建的对象) ，官方文档: http://msdn.microsoft.com/zh-cn/vcsharp/ms536423

 

标准实现:

1. event = document.createEvent 可以创建一个event对象， 不同的是创建的event对象需要执行特定的初始化方法，这点标准分的比较细，有UIEvent, MouseEvent等等好多。Event执行了初始化后，才能被使用。文档：https://developer.mozilla.org/en/DOM/document.createEvent  
2. HTMLElement.dispatchEvent(事件对象[event])可以触发事件，至于触发的事件类型，在1中初始化event的时候提供，请看文档。

 

首先，需要明确的是同样是Event， IE和标准的有很大的不同：

IE : http://msdn.microsoft.com/zh-cn/vcsharp/ms535863   

标准: https://developer.mozilla.org/en/DOM/event 

 

所以我们首先要做的就是，尽量的统一Evnt的属性:

/** * Fix IE event object * * @return Event object */ fixEvent: function() { var event = this.event, undefined; if(event.charCode === undefined) { event.charCode = (event.type === "keypress") ? event.keyCode : 0; } if(event.isChar === undefined) { event.isChar = event.charCode > 0 ; } if(event.eventPhase === undefined) { event.eventPhase = 2; } if(event.pageX === undefined && event.pageY === undefined) { event.pageX = event.clientX + document.body.scrollLeft; event.pageY = event.clientY + document.body.scrollTop; } if(!event.preventDefault) { event.preventDefault = function() { this.returnValue = false; } } if(event.relatedTarget === undefined) { switch(event.type) { case "mouseout": event.relatedTarget = event.toElement; break; case "mouseover": event.relatedTarget = event.fromElement; } } if(!event.stopPropagation) { event.stopPropagation = function() { this.cancelBubble = true; } } if(event.target === undefined) { event.target = event.srcElement; } if(event.timeStamp === undefined) { event.timeStamp = new Date().getTime(); } return event; }

 

这个函数可以把IE的event尽量的向标准的event靠近， 注意上下文的this.event就是浏览器产生的event, 所以用的时候要fixEvetn.call(原生的event对象)；

 

接下来给出我封装的兼容代码：

 

/** * Fire event * * @param {HTMLElement} el HTMLElement * @param {String} evtType Event type * @param {String} initType Event init type * @return {Boolean} Event fire successfully or canceled */ fireEvent: function(el, evtType, evtVal, initType) { var evt, p, event; // Create event object if (document.createEvent) { evt = { canBubble: true, cancelable: true, view: window, detail: 1, screenX: 0, screenY: 0, clientX: 0, clientY: 0, ctrlKey: false, altKey: false, shiftKey: false, metaKey: false, button: 0, relatedTarget: null, bubbles: true, viewArg: null, ctrlKeyArg: false, altKeyArg: false, shiftKeyArg: false, metaKeyArg: false, keyCodeArg: 0, charCodeArg: 0 }; if (evtVal) { // override evt init value for (p in evtVal) { evt[p] = evtVal[p]; } } switch (initType || "MouseEvents") { case "MouseEvents": event = document.createEvent("MouseEvents"); event.initMouseEvent(evtType, evt.canBubble, evt.cancelable, evt.view, evt.detail, evt.screenX, evt.screenY, evt.clientX, evt.clientY, evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, evt.button, evt.relatedTarget); break; case "HTMLEvents": event = document.createEvent("HTMLEvents"); event.initEvent(evtType, evt.bubbles, evt.cancelable); break; case "UIEvents": event = document.createEvent("UIEvents"); event.initUIEvent(evtType, evt.canBubble, evt.cancelable, evt.view, evt.detail); break; case "KeyboardEvent": event = document.createEvent("KeyboardEvent"); event.initKeyEvent(evtType, evt.bubbles, evt.cancelable, evt.viewArg, evt.ctrlKeyArg, evt.altKeyArg, evt.shiftKeyArg, evt.metaKeyArg, evt.keyCodeArg, evt.charCodeArg); } } else if (document.createEventObject) { event = document.createEventObject(); if (evtVal) { // override evt init value for (p in evtVal) { event[p] = evtVal[p]; } } } // fire event if(el.dispatchEvent) { return el.dispatchEvent(event); } else if(el.fireEvent) { return el.fireEvent("on" + evtType, event); } }

参数:

• eventType: String
  事件类型
• eventVal: Object[可选]
  event事件对象的自定义值, 根据initType类型选择填充event值
• initType: String[可选]
  - 事件对象的初始化类型, 有以下:

  • MouseEvents[默认]
    eventVal 可选值: canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget
  • HTMLEvents
    eventVal可选值: bubbles, cancelable
  • UIEvents
    eventVal可选值: canBubble, cancelable, view, detail
  • KeyboardEvent
    eventVal可选值: bubbles, cancelable, viewArg, ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, keyCodeArg, charCodeArg

 

 

PS:  IE的Event对象是可以随意附加值的，标准的Evnt要根据初始化方法传入值；对于event本身的属性需要给出正确的类型，否则忽视。无论是IE还是标准，自定义的Event都会初始化一下固有的值。

 

IE有4个：

 

Event object property	Value
cancelBubble	false
returnValue	true
srcElement	element on which the event is fired
type	name of the event that is fired

Example

 

标准的就看官方文档了，比较细致。

 

 

 

fireEvent触发dom元素注册的事件后，需要在事件函数中用fixEvent函数修正event对象，这样一些自定义的属性才会体现出来。我是按照标准来封装的代码的，就是说保持尽量让IE表现的和标准一致的原则。

 

 

 

最后，希望本文对使用自定义事件的朋友们有所帮助，good luck。