Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

为IE8添加EventListener系列方法支持

  在低版本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.js
-[1,]||(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];
      if(s)for(var i=0;i<s.length;i++)
        if(s[i]==f)return void s.splice(i,1);
    };
  };
  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];
      if(s)for(var s=s.slice(0),i=0;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}
  };
  for(var o,n,i=0;o=window["HTML"+tags[i]+"Element"];i++)
    tags[i]=o.prototype;
  for(i=0;i<html5tags.length;i++)
    tags.push(document.createElement(html5tags[i]).constructor.prototype);
  for(i=0;o=tags[i];i++)
    for(n in properties)Object.defineProperty(o,n,properties[n]);
})();
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^