javascript - 如何通过 parent 的 onmouseover 事件传递 child ？

Question

onmouseover 每当鼠标进入该元素或其子元素之一时就会触发。有没有一种好方法只在父级上设置 onmouseover 事件，但它会在参数中传递当前悬停的元素(触发事件)？

 <div id="parent" onmouseover="foo(triggerElement)">  <!-- this ofc doesn't work. How to write this? -->
   <div id="child1" onmouseover="foo(this)">Child 1</div>
   <div id="child2" onmouseover="foo(this)">Child 2</div>
   <div id="child3" onmouseover="foo(this)">Child 3</div>
   <!-- I don't want to set the same onmouseover event for each child -->
 </div>

jsfiddle

我当然可以使用 javascript 将 onmouseover 属性添加到 div 的每个子元素，并使用参数“this”，但这似乎不太好。有更好的方法吗？

Answer 1

像这样的事情应该做到这一点

document.getElementById('parent').addEventListener('mouseenter', function(event) {
    if (event.target !== this)
        event.target.innerHTML = "You just hovered " + event.target.id;
}, true);

FIDDLE