Question

如果我有这样的功能：

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

我在HTML页面本身的元素someElement中没有，所以在我向页面添加someElement之后，之前的代码不起作用。

向（新）动态添加的HTML元素添加事件侦听器的最佳方法是什么？

Answer 1

这里有两种常见的策略。

将元素添加到DOM后，将事件挂钩在元素上。
使用事件委派。

第一个是相当简单的，所以我将专注于第二个：

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

例如，假设你有

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

您可以将click事件挂钩到容器div上，然后执行以下操作：

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

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

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

以下是一个例子：

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来保持简单。在制作中，我建议在IE上使用addEventListener（或attachEvent）。实际上，我通常建议使用一个好的库，例如jQuery，YUI，Closure或any of several others来提供它们提供的重要实用功能（包括平滑{{1 } / addEventListener事情）。

Answer 2

您可以使用addEventListener()（attachEvent() for IE）在新创建的元素上注册点击处理程序，例如：

var x = document.createElement('div');
x.innerText = 'click me';

x.addEventListener('click', function() {
  alert('i am clicked');
});

document.body.appendChild(x);

Demo

<强>更新

请看TJ's answer;他基本上说你可以设置一个容器，你可以在其上定义一个点击处理程序;内部添加的任何元素都会将其事件冒泡到容器中。这样，您只需要一个单击处理程序，而不是每个元素一个。

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

2 个答案: