javascript - 使用 JavaScript 的事件委托(delegate)

Question

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

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

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

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

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

fiddle :http://jsfiddle.net/ZhpLA/

正如其他人所指出的，jQuery 还使它的代码略少(尽管如果这就是您所需要的，那将毫无意义):

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

上述 jQuery 代码的优势在于，它将应用于 #parent 的当前和 future 子div。如果您要以编程方式添加更多内容，mouseover 事件也将继续为它们工作。