Internet Explorer中的addEventListener


68

相当于Internet Explorer 9中的Element对象?

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

在Internet Explorer中如何运作?

如果有一个函数等于addEventListener我不知道,请解释。

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


1
浏览器是否为其DOM对象实现原型继承方案与它是否支持W3C EventTarget接口无关。如果您想测试支持,请直接测试:if(element.addEventListener) {/*supported*/} else {/*not supported*/}在所有浏览器中均有效,并且独立于实现。
RobG 2011年

Answers:


147

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;
   }
}

19
最后一个条件还应包括"on"+
Marcel Korpel 2013年

76
对于IE9和addEventListener,您需要HTML5 <!DOCTYPE html>
pcunite 2013年

1
@pcunite希望我能对该评论进行更多投票。非常重要的一点
Okeydoke

5
同样,由于IE9在兼容性视图中使用IE7呈现模式,因此仅attachEvent有效。因此,进行此检查而不是依赖addEventListener至关重要。
13年

16

约翰Resig的,jQuery的作者,他提交的跨浏览器实现的版本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 );
}

资料来源:http : //ejohn.org/projects/flexible-javascript-events/


该代码除了添加事件侦听器外,还尝试将回调fn绑定到obj,但这是多余的,因为每个使用JS的人都应该已经知道this
阿里·沙基巴

3
如果您将John Resig介绍为jQuery的作者,您将获得更多的选票。
Sanghyun Lee

此实现尚未完成。它缺少useCapture参数。
magritte

14

我正在使用此解决方案,并且可以在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>

IE8和Chrome,Firefox等均可使用。


我对元素有
疑问

检查您的文档类型版本,这应该是html5 doctype
RTeobaldo

2

正如Delan所说,您想将addEventListener用于较新的版本,将attachEvent用于较旧的版本。

您将在MDN上找到有关事件侦听器的更多信息。(请注意,在侦听器中有一些带有'this'值的警告)。

您也可以使用类似jQuery的框架来完全抽象事件处理。

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

2

对于喜欢精美代码的人来说,这是一些东西。

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);
    }
}

Iframe-Resizer偷来的无耻。



1

编辑

我写了一个片段来模拟EventListener接口和ie8,即使在普通对象上也可以调用:https : //github.com/antcolag/iEventListener/blob/master/iEventListener.js

老答案

这是一种在不支持其中一种
希望的浏览器上模拟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)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.