可以使用 javascript 将多个事件侦听器/处理程序添加到同一个元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5411055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can multiple event listeners/handlers be added to the same element using javascript?
提问by bryan sammon
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);
}
采纳答案by Felix Kling
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 oncewhich method to use. Then you can attach events throughout your script with:
这将测试一次使用哪种方法。然后，您可以使用以下命令在整个脚本中附加事件：
addEventListener(window, 'load',videoPlayer);
addEventListener(window, 'load',somethingelse);
回答by shito
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);
});
}
}
回答by Jorge Epu?an
/**
* 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
