JavaScript：什么是 addEventListener？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2695793/
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
JavaScript: What is addEventListener?
提问by Strawberry
What is this function? Didn't really find any good examples.
这是什么功能？真的没有找到任何好的例子。
回答by Daniel Vassallo
The addEventListenermethod is the W3C standard methodto attach an event handler to an element, so that you can do something useful when an event is triggered. The following example would popup an alert message when the element with id my_image_idis clicked:
该addEventListener方法是将事件处理程序附加到元素的W3C 标准方法，以便您可以在触发事件时执行一些有用的操作。以下示例将在my_image_id单击具有 id 的元素时弹出警告消息：
function doSomething() {
alert('Image clicked');
}
var myImage = document.getElementById('my_image_id');
myImage.addEventListener('click', doSomething, false);
Unfortunately this does not work in Internet Explorer, since Microsoft uses a different event registration model. In Internet Explorer 5+, you would have to attach the event handler as follows:
不幸的是，这在 Internet Explorer 中不起作用，因为 Microsoft 使用不同的事件注册模型。在 Internet Explorer 5+ 中，您必须按如下方式附加事件处理程序：
myImage.attachEvent('onclick', doSomething);
Therefore for a cross browser event registration method, you can use reflection and execute conditionally:
因此对于跨浏览器事件注册方法，可以使用反射并有条件地执行：
function addEventHandler(node, type, f) {
if (node.addEventListener) {
node.addEventListener(type, f, false);
}
else if (node.attachEvent) {
node.attachEvent("on" + type, f);
}
else {
node["on" + type] = f;
}
}
var myImage = document.getElementById('my_image_id');
addEventHandler(myImage, 'click', doSomething);
Further reading:
进一步阅读：
回答by thomasrutter
You may be familiar with adding an event handler like this:
您可能熟悉添加这样的事件处理程序：
window.onload = function() {
alert('onload event!');
};
or even in HTML like this:
甚至在这样的 HTML 中：
<body onload="alert('onload event!')">
Well, the downside to this is that you can only have one event handler. So if something else later overwrites that "onload" property, the previous event handler is no longer used.
好吧，这样做的缺点是您只能拥有一个事件处理程序。因此，如果其他内容稍后覆盖了“onload”属性，则不再使用先前的事件处理程序。
addEventListeneris a way to register an event handler without overwriting a previous one. It's supported by most browsers other than Internet Explorer. No to worry, though, because Internet Explorer has its own equivalent: attachEvent.
addEventListener是一种注册事件处理程序而不覆盖前一个事件处理程序的方法。除了 Internet Explorer 之外，大多数浏览器都支持它。不过不用担心，因为 Internet Explorer 有它自己的等效项：attachEvent。
Here's a (simplified) example of their use:
这是它们使用的（简化）示例：
if (myelement.addEventListener) {
// other browsers
myelement.addEventListener(eventname, callback, false);
}
else {
myelement.attachEvent("on"+eventname, callback);
}
It's usually a better idea to register an event using addEventListener or attachEvent methods than the onload/onsomething property because it will not possibly disrupt any other Javascript code from the same page.
使用 addEventListener 或 attachEvent 方法注册事件通常比使用 onload/onsomething 属性更好，因为它不会破坏来自同一页面的任何其他 Javascript 代码。
