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

I have:

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

and then later I have:

然后我有:

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

Is it preferred/functional to have them all together? Like

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

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

3 个解决方案

#1

You can do how ever you want it to do. They don't have to be together, it depends on the context of the code. Of course, if you can put them together, then you should, as this probably makes the structure of your code more clear (in the sense of "now we are adding all the event handlers").

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

But sometimes you have to add event listeners dynamically. However, it is unnecessary to test multiple times whether you are dealing with IE or not.

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

Better would be to abstract from this and test only once which method is available when the page is loaded. Something like this:

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

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

This will test once which method to use. Then you can attach events throughout your script with:

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

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

#2

I use this function:

我用这个函数:

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

    });
  }
}

#3

/**
 * multipleEventsListeners.js
 * Add the capability to attach multiple events to an element, just like jQuery does
 * https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
 */

multipleEventsListeners(events, func, elem) {
  elem = elem || document;
  var event = events.split(' ');
  for (var i = 0; i < event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}

/*
Use: 
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
  console.log = this.value;
});
*/

from: https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b

#1