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

How to attach events to new added html elements

本文关键字：添加 元素 html 新添加 事件      更新时间：2023-09-26

如果我有这样一个函数:

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

和我没有在元素someElement在HTML页面本身，所以我添加someElement到页面后，但之前的代码不工作。

向(新的)动态添加的HTML元素添加事件侦听器的最佳方法是什么?

这里有两种常见的策略。

  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处理程序中看到单击。

您可以通过使用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 + "'");
  }
})();

实例|来源

注意:我使用onclick来保持事情简单。在生产中，我建议使用addEventListener(或IE上的attachEvent)。事实上，我通常建议使用好的库，如jQuery、YUI、Closure或其他几个库中的任何一个，因为它们提供了重要的实用功能(包括平滑addEventListener/attachEvent)。

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

var x = document.createElement('div');
x.innerText = 'click me';
x.addEventListener('click', function() {
  alert('i am clicked');
});
document.body.appendChild(x);

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

相关文章：