可以使用javascript将多个事件侦听器/处理程序添加到同一元素中吗？

Question

我有:

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
}
else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer);
}

然后我有:

if (window.addEventListener) {
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',somethingelse);
}

将它们全部放在一起是首选/功能吗？喜欢

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer,false);
  window.attachEvent('onload',somethingelse);
}

Answer 1

您可以按照自己的意愿行事.它们不必在一起,这取决于代码的上下文.当然,如果你可以将它们组合在一起,那么你应该这样做,因为这可能使代码的结构更加清晰(在"现在我们正在添加所有事件处理程序"的意义上).

但有时您必须动态添加事件侦听器.但是,没有必要多次测试您是否正在处理IE.

更好的方法是从中抽象并仅测试加载页面时哪种方法可用.像这样的东西:

var addEventListener = (function() {
    if(document.addEventListener) {
        return function(element, event, handler) {
            element.addEventListener(event, handler, false);
        };
    }
    else {
        return function(element, event, handler) {
            element.attachEvent('on' + event, handler);
        };
    }
}());

这将测试一次使用哪种方法.然后,您可以在整个脚本中附加事件:

addEventListener(window, 'load',videoPlayer);
addEventListener(window, 'load',somethingelse);

Answer 2

我用这个函数:

function addEvent (obj, type, fn) {
  if (obj.addEventListener) {

    obj.addEventListener(type, fn, false);

  } else if (obj.attachEvent) {

    obj.attachEvent('on' + type, function () {

      return fn.call(obj, window.event);

    });
  }
}