Question

我已经阅读了很多关于我的问题的答案，但他们都是关于使用jQuery的.on()，我正在学习Javascript，我想知道如何通过JavaScript处理新创建的元素的事件。

我尝试使用addEventListener在将元素添加到DOM的过程中触发，而不是在事件发生时！

Answer 1

根本的事情是将事件挂钩到您要添加元素的容器上。大多数事件 bubble ，以及（例如）点击子元素会冒泡到父元素。

所以说你有：

<ul id="container"></ul>

你这样做：

document.getElementById("container").addEventListener("click", function(e) {
    console.log(e.target.innerHTML);
});
setInterval(function() {
    var li = document.createElement('li');
    li.innerHTML = "Added " + new Date();
    document.getElementById("container").appendChild(li);
}, 2000);

现在我们每隔几秒就会添加一个新的li。单击列表项将显示其内容，因为点击气泡到父容器，这是我们挂钩点击的位置。 e.target是对事件发起的元素的引用。

这称为事件委托。

Live Example | Source

如果您在子元素中包含元素，则可能需要查看e.target.parentNode或e.target.parentNode.parentNode等，以找到您关注的元素。（这通常涉及一个循环，依次转到每个父节点，当你到达挂钩事件的元素时停止。）

附注：使用jQuery 是使用JavaScript（除非您使用CoffeeScript，TypeScript，Dart或其他语言）。 jQuery是一个库，而不是一种语言。

Answer 2

确保传递对事件处理程序的引用，而不是在设置它时调用它。换句话说，这样做：

var handler = function(ev) { /* ... */ };

el.addEventListener("click", handler);

但是不要这样做：

var handler = function(ev) { /* ... */ };

el.addEventListener("click", handler());

如何处理javascript添加的元素的事件？没有.on（）jQuery？

2 个答案: