为IE8添加EventListener系列方法支持

时间:2022-04-22 10:26:58

在低版本IE中添加DOM元素事件可以使用attachEvent方法。但是用它模拟addEventListner还要解决一些问题。主动触发事件的API设计逻辑不同,需要处理的地方比较多。fireEvent也不支持自定义事件,还需要对自定义事件的储存和触发写额外的代码。

<script src="ie8-eventlistener.js"></script>
<script>
document.addEventListener("test",function(){
console.log("test");
});
var e=document.createEvent("Events");
e.initEvent("test");
document.dispatchEvent(e);
</script>

为IE8添加EventListener系列方法支持

,]||(function(){

//为window对象添加 addEventListener=function(n,f){

if("on"+n in this.constructor.prototype)

this.attachEvent("on"+n,f);

else {

var o=this.customEvents=this.customEvents||{};

n in o?o[n].push(f):(o[n]=[f]);

};

};

removeEventListener=function(n,f){

if("on"+n in this.constructor.prototype)

this.detachEvent("on"+n,f);

else {

var s=this.customEvents&&this.customEvents[n];

;i<s.length;i++)

);

};

};

dispatchEvent=function(e){

if("on"+e.type in this.constructor.prototype)

this.fireEvent("on"+e.type,e);

else {

var s=this.customEvents&&this.customEvents[e.type];

),i=;i<s.length;i++)

s[i].call(this,e);

}

};

//为document对象添加

HTMLDocument.prototype.addEventListener=addEventListener;

HTMLDocument.prototype.removeEventListener=removeEventListener;

HTMLDocument.prototype.dispatchEvent=dispatchEvent;

HTMLDocument.prototype.createEvent=function(){

var e=document.createEventObject();

e.initMouseEvent=function(en){this.type=en;};

e.initEvent=function(en){this.type=en;}; return e; };

//为全元素添加

var tags=[

"Unknown","UList","Title","TextArea","TableSection","TableRow", "Table","TableCol","TableCell","TableCaption","Style","Span",

"Select","Script","Param","Paragraph","Option","Object","OList", "Meta","Marquee","Map","Link","Legend","Label","LI","Input",

"Image","IFrame","Html","Heading","Head","HR","FrameSet", "Frame","Form","Font","FieldSet","Embed","Div","DList",           "Button","Body","Base","BR","Area","Anchor"

],html5tags=[

"abbr","article","aside","audio","canvas","datalist","details",    "dialog","eventsource","figure","footer","header","hgroup","mark",    "menu","meter","nav","output","progress","section","time","video"

],properties={

addEventListener:{value:addEventListener},

removeEventListener:{value:removeEventListener},

dispatchEvent:{value:dispatchEvent}

};

;o=window["HTML"+tags[i]+"Element"];i++)

tags[i]=o.prototype;

;i<html5tags.length;i++)

tags.push(document.createElement(html5tags[i]).constructor.prototype);

;o=tags[i];i++)

for(n in properties)Object.defineProperty(o,n,properties[n]);

})();