Javascript Internet Explorer中的addEventListener

Internet Explorer 9中元素对象的等效项是什么

if (!Element.prototype.addEventListener) {
    Element.prototype.addEventListener = function() { .. } 
} 

它在Internet Explorer中是如何工作的

如果有一个函数等于

addEventListener

，我不知道，请解释一下

---

任何帮助都将不胜感激。请随意提出一种完全不同的解决问题的方法。

addEventListener

从第9版开始受支持；对于较旧的版本，请使用类似的函数attachEvent。

正如Delan所说，您希望对较新的版本使用addEventListener，对较旧的版本使用attachEvent

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

您将在上找到有关事件侦听器的更多信息。（请注意，在您的侦听器中有一些关于“this”值的警告）

您还可以使用类似的框架来抽象事件处理

$("#someelementid").bind("click", function (event) {
   // etc... $(this) is whetver caused the event
});

---

addEventListener

是用于附加事件处理程序的适当DOM方法

Internet Explorer（版本8之前）使用了另一种

attachEvent

方法

Internet Explorer 9支持正确的

addEventListener

方法

以下是编写跨浏览器

addEvent

函数的尝试

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

---

jQuery的作者John Resig提交了他版本的

addEvent

和

removeEvent

的跨浏览器实现，以避免与IE不正确或不存在的

addEventListener

的兼容性问题

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

---

来源：

我正在使用此解决方案，并在IE8或更高版本中工作

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

然后：

<button class="click-me">Say Hello</button>

<script>
  document.querySelectorAll('.click-me')[0].addEventListener('click', function () {
    console.log('Hello');
  });
</script>

打招呼 document.queryselectoral（'.click me'）[0]。addEventListener（'click'，函数（）{ log（'Hello'）； }); 这将同时适用于IE8和Chrome、Firefox等

我编写了一个模拟EventListener接口和ie8接口的代码段，它甚至可以在普通对象上调用：

旧答案

这是一种在不支持addEventListener或attachEvent的浏览器上模拟addEventListener或attachEvent的方法
希望会有所帮助

(function (w,d) {  // 
    var
        nc  = "", nu    = "", nr    = "", t,
        a   = "addEventListener",
        n   = a in w,
        c   = (nc = "Event")+(n?(nc+= "", "Listener") : (nc+="Listener","") ),
        u   = n?(nu = "attach", "add"):(nu = "add","attach"),
        r   = n?(nr = "detach","remove"):(nr = "remove","detach")
/*
 * the evtf function, when invoked, return "attach" or "detach" "Event" functions if we are on a new browser, otherwise add "add" or "remove" "EventListener"
 */
    function evtf(whoe){return function(evnt,func,capt){return this[whoe]((n?((t = evnt.split("on"))[1] || t[0]) : ("on"+evnt)),func, (!n && capt? (whoe.indexOf("detach") < 0 ? this.setCapture() : this.removeCapture() ) : capt  ))}}
    w[nu + nc] = Element.prototype[nu + nc] = document[nu + nc] = evtf(u+c) // (add | attach)Event[Listener]
    w[nr + nc] = Element.prototype[nr + nc] = document[nr + nc] = evtf(r+c) // (remove | detach)Event[Listener]

})(window, document)

（函数（w，d）{//
变量
nc=“”，nu=“”，nr=“”，t，
a=“addEventListener”，
n=在w中的a，
c=（nc=“事件”）+（n？（nc+=”，“侦听器”）：（nc+=“侦听器”，），
u=n？（nu=“附加”、“添加”）：（nu=“附加”、“附加”），
r=n？（nr=“分离”、“移除”）：（nr=“移除”、“分离”）
/*
*调用evtf函数时，如果我们在新浏览器上，则返回“attach”或“detach”“Event”函数，否则添加“add”或“remove”“EventListener”
*/
函数evtf（whoe）{返回函数（evnt，func，capt）{返回这个[whoe]（（t=evnt.split（“on”））[1]| | t[0]：（（+evnt）），func，（！n&&capt）（whoe.indexOf（“detach”）<0？this.setCapture（）：this.removeCapture（）：capt））}
w[nu+nc]=元素。原型[nu+nc]=文档[nu+nc]=evtf（u+c）/（添加|附加）事件[Listener]
w[nr+nc]=元素。原型[nr+nc]=文档[nr+nc]=evtf（r+c）/（移除|分离）事件[Listener]
})（窗口、文件）

我会使用这些polyfill

---

这里有一些东西给那些喜欢漂亮代码的人

function addEventListener(obj,evt,func){
    if ('addEventListener' in window){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in window){//IE
        obj.attachEvent('on'+evt,func);
    }
}

---

无耻地从中窃取。

浏览器是否为其DOM对象实现原型继承方案与它是否支持W3C无关。如果希望测试支持，请直接测试：

If（element.addEventListener）{/*supported*/}否则{/*notsupported*/}

在所有浏览器中都有效，并且独立于实现。最后一个条件还应包括

“on”+

。对于IE9和addEventListener，您需要一个HTML5@pcunite，希望我能更多地投票支持该评论。非常重要的一点也是因为IE9在兼容性视图中使用IE7渲染模式，所以只有attachEvent可以工作。因此，进行此检查而不是依赖addEventListener非常重要。此代码除了添加事件侦听器之外，还尝试将回调fn绑定到obj，但是这是多余的，因为每个使用JS的人都应该知道这一点。如果你介绍John Resig作为jQuery的作者，你会得到更多的选票。这个实现还没有完成。缺少useCapture参数。我对元素有问题（类型未定义）请检查您的文档类型版本，这应该是html5 doctype