使用 JavaScript 的事件委托答案

【问题标题】：Event delegate with JavaScript使用 JavaScript 的事件委托
【发布时间】：2012-01-22 00:04:13
【问题描述】：

我有一个 div 列表，我想在其中添加“onmouseover”事件。我尝试遍历元素列表，并像这样重新定义“onmouseover”函数：

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

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

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

【问题讨论】：

您的作业末尾缺少 }。
试试jquery，对你有很大帮助。
类似的代码在这里可以正常工作：jsfiddle.net/dqCef elements 数组是如何创建的？您的代码是在 onload 处理程序中，还是在正文的末尾在所有有问题的 div 之后？
@nnnnnn 你是对的。我在这里添加了一个更好的例子：jsfiddle.net/qajPM

标签： javascript events delegates

【解决方案1】：

您可以做的一件事是，您可以为父级分配一个处理程序，而不是为每个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');
};

小提琴：http://jsfiddle.net/ZhpLA/

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

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

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

【讨论】：

jquery 很棒，但我不能证明导入库只是为了解决这个问题。
当然，这就是为什么小提琴是普通的'ol javascript。 ;)
如果所有 div 具有相同的父级，这将起作用。现在不是这样，也不一定是我要添加的限制。

【解决方案2】：

问题是您正在像这样创建所有 div 元素：

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

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

试试这样的：

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

添加一个新元素而不影响已经存在的元素。

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

【讨论】：