javascript - 如何将事件附加到新添加的 html 元素

Question

如果我有这样的功能:

document.someElement.click = function(){alert(555);}

并且我在 HTML 页面本身的元素 someElement 中没有，所以在我将 someElement 添加到页面之后，但是之前的代码不起作用.

向(新)动态添加的 HTML 元素添加事件监听器的最佳方式是什么？

Answer 1

这里有两种常见的策略。

1. 将元素添加到 DOM 后，挂接元素上的事件。

2. 使用事件委托(delegate)。

第一个相当简单，所以我将重点介绍第二个:

事件委托(delegate)的想法是，大多数 DOM 事件从它们发生的元素“冒泡”到文档，您可以在任何级别处理它们。

例如，假设你有

<div id="container">
</div>

您可以在容器 div 上 Hook click 事件，然后如果您这样做:

var span = document.createElement('span');
span.innerHTML = "Hi there";
document.getElementById("container").appendChild(span);

...然后，当您单击 span 时，事件将冒泡到容器，您会在容器的 click 处理程序中看到单击。

您可以通过使用 event 对象的 target 属性来判断哪个元素启动了事件。

这是一个例子:

HTML:

<button id="theButton">Click To Add</button>
<div id="container"></div>

JavaScript:

// Note that this code is at the end of the document
(function() {
  var container = document.getElementById("container");

  // Hook clicks on the button
  document.getElementById("theButton").onclick = buttonClick;

  // Hook clicks on the container
  container.onclick = containerClick;

  // Handle button clicks
  function buttonClick() {
    var child = document.createElement('div');
    child.id = ('d' + container.childNodes.length) +
      Math.floor(Math.random() * 10000);
    child.innerHTML = "I'm child div '" + child.id + "'";
    container.appendChild(child);
  }

  // Handle container clicks
  function containerClick(event) {
    event = event || window.event;

    alert("You clicked child '" + event.target.id + "'");
  }

})();

Live Example | Source

注意:为了简单起见，我使用了 onclick。在生产中，我建议使用 addEventListener(或在 IE 上使用 attachEvent)。事实上，我通常建议使用像 jQuery 这样的好库。 , YUI , Closure , 或 any of several others因为它们提供的重要实用功能(包括平滑 addEventListener/attachEvent 东西)。