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

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

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

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

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

Answer 2

问题是你正在创建所有的div元素：

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

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

尝试这样的事情：

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

在不影响已存在的元素的情况下附加新元素。

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

使用JavaScript的事件委托

2 个答案: