使用JavaScript的事件委托

Event delegate with JavaScript

本文关键字：事件 JavaScript 使用      更新时间：2023-09-26

我有一个div列表，我想向其中添加"onmouseover"事件。我尝试迭代元素列表，并重新定义"onmouseover"函数，如下所示：

for (var i=0; i<3; i++) {
   elements[i].onmouseover = function() { alert('FOO') }; 
}

不幸的是，在页面加载完成后，它看起来只应用于最后一个元素。我确信这是一个真正的新手问题，但我仍然没有弄清楚。。。

这里有一个更好的例子来展示我的问题：http://jsfiddle.net/qajPM/

您可以做的一件事是，不必为每个div分配一个事件处理程序，而是可以为父级分配一个处理程序，然后简单地根据事件目标获取鼠标悬停在哪个div上。

HTML:

<div id="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Javascript：

document.getElementById('parent').onmouseover = function(e) {
    var target = e.target || e.currentTarget;
    alert('Target ' + target.innerHTML + ' was moused over');
};

Fiddle：http://jsfiddle.net/ZhpLA/

正如其他人所指出的，jQuery也使它的代码略少（尽管如果这就是你所需要的全部，那就毫无意义了）：

$('#parent').on('mouseover', 'div', function(e) {
    alert('Target ' + e.currentTarget.innerHTML + ' was moused over');
});

上述jQuery代码的优点是它将同时应用于#parent的当前和未来子div。如果您以程序方式添加更多mouseover事件也将继续为他们工作。

问题是您创建的所有div元素如下：

parent.innerHTML += "<div> " + i + "</div>"

我相信你知道这相当于parent.innerHTML = parent.innerHTML + ...，但.innerHTML属性以字符串的形式返回html（没有任何已经关联的事件处理程序），所以每次这样做都会用一个新的字符串覆盖parentdiv的整个innerHTML，这意味着你有效地添加到了文本内容中，但却破坏了已经设置的mouseover处理程序。

试试这样的东西：

var el = document.createElement("div");
el.innerHTML = i;
parent.appendChild(el);

它在不影响现有元素的情况下附加一个新元素。

更新的演示：http://jsfiddle.net/qajPM/1/

相关文章：