2

如果我有这样的功能：

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

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

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

4

2 回答 2

4

这里有两种常见的策略。

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

  2. 使用事件委托。

第一个相当简单，所以我将重点关注第二个：

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

例如，假设你有

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

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

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 + "'");
  }

})();

实例| 资源

注意：我习惯于onclick保持简单。在生产中，我建议使用addEventListener（或attachEvent在 IE 上）。事实上，我通常建议使用像jQuery、YUI、Closure或任何其他库这样的优秀库来提供它们提供的重要实用功能（包括平滑addEventListener/attachEvent事物）。

于 2012-12-22T08:06:53.463 回答
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);

演示

更新

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

于 2012-12-22T08:05:42.723 回答