JavaScript：addEventListener是什么？

Question

JavaScript：addEventListener是什么？

javascript

4

这个函数是什么？我没有找到任何好的例子。

- Strawberry

6

谷歌给我的第一个链接是一个相当不错的例子... https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener - NG.

3

你有找过吗？其实我没有找到任何好的例子。 - SLaks

3个回答

7

您可能已经熟悉了像这样添加事件处理程序：

window.onload = function() {
  alert('onload event!');
};

甚至可以像这样在HTML中使用：

或者

<body onload="alert('onload event!')">

这种方式的缺点是只能有一个事件处理程序。如果稍后有其他东西覆盖了“onload”属性，先前的事件处理程序将不再使用。

addEventListener是一种注册事件处理程序而不覆盖以前处理程序的方法。它被大多数浏览器支持，除了Internet Explorer。不用担心，因为Internet Explorer有自己的等效方法：attachEvent。

以下是它们使用的（简化）示例：

        if (myelement.addEventListener) {
            // other browsers
            myelement.addEventListener(eventname, callback, false);
        } 
        else {
            myelement.attachEvent("on"+eventname, callback);
        }

通常使用addEventListener或attachEvent方法来注册事件比使用onload/onsomething属性更好，因为它不会干扰同一页面中的其他Javascript代码。

- thomasrutter

点赞解释为什么我们使用它，而不仅仅是它是什么。 - kiwicomb123

0

addEventListener() 方法可以在不覆盖现有事件处理程序的情况下，将事件处理程序附加到元素上。例如 "click" 或 "DOMContentLoaded"。它会监听某些事件的发生。然后，您可以添加一些函数，当该事件发生时，它将执行该函数。

例如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
    document.getElementById("div").style.visibility = "hidden";
});

- user14076142

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Vassallo · Accepted Answer

addEventListener 方法是将事件处理程序附加到元素的 W3C 标准方法，以便在事件触发时执行有用的操作。以下示例将在单击 ID 为 my_image_id 的元素时弹出警报消息：

function doSomething() {
   alert('Image clicked');
}

var myImage = document.getElementById('my_image_id');

myImage.addEventListener('click', doSomething, false);

不幸的是，这在Internet Explorer中不起作用，因为微软使用不同的事件注册模型。在Internet Explorer 5+中，您必须按以下方式附加事件处理程序：

myImage.attachEvent('onclick', doSomething);

因此，为了实现跨浏览器的事件注册方法，您可以使用反射并有条件地执行：

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

进一步阅读：