在jQuery中有一个trigger的方法,用于主动式激发事件。这与我们给一个元素绑定了事件后然后触发事件有很大区别。假如我们的事件系统是基于代理的,所有事件都是存于缓存体中,点击某一个元素,然后通过冒泡把此元素的信息传递到全局变量,我们可以通过其target获取事件源(也就是我们刚才的点击的元素),为了放便,我们也应该预先为每一个元素设定一个uuid。在添加事件时,我们把元素的uuid,事件类型,绑定函数一并放进缓存体中。这时我们就可以通过元素的uuid与事件类型找回绑定函数,执行绑定函数。但这不是fireEvent。fireEvent,我们执行一函数,让它调用页面上某个元素的某某事件。
我们先看一下火狐下的fireEvent吧。
createEvent的相关说明,见火狐官网。
在Prototype.js淘到如下一段代码:
function fireEvent(element,event){ if (document.createEventObject){ // dispatch for IE var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // dispatch for firefox + others var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type,bubbling,cancelable return !element.dispatchEvent(evt); } }
不过它还是要求事件绑定在元素上,好像对我的事件系统没有什么帮助……
<!DOCTYPE HTML> <html> <head> <title>IE fireEvent</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function log(s){ window.console && console.log(s) } window.onload = function(){ var a = document.getElementById("span"); var div = document.getElementById("div2"); div.onclick = function(e){ log("div2") if(e){ e.stopPropagation() }else{ window.event.cancelBubble = true; } } a.click(); } </script> </head> <body onclick="log('body')"> <div id="div2"> <div onclick="log('div');" > <span onclick="log('span')" id="span">span</span> </div> </div> </body> </html>