Internet Explorer中的addEventListener

Question

Internet Explorer 9中的Element对象是什么？

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

它在Internet Explorer中如何工作？

如果有一个等于addEventListener和我不知道的功能,请解释.

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

Answer 1

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

Answer 2

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

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

Answer 3

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