如何将 child 与 parent 的 onmouseover 事件一起传递？

Question

onmouseover 每当鼠标进入元素或其之一 children 时触发。是否有一种仅在 parent 上设置 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

我当然可以将 onmouseover 属性添加到 div 的每个 individual child 中，参数为 'this' 和 javascript，但这并没有看起来太好了。有更好的方法吗？

Answer 1

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

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

FIDDLE

如何将 child 与 parent 的 onmouseover 事件一起传递？

How to pass child with parent's onmouseover event?

javascript

html

triggers

onmouseover