onmouseover eventlistener onto all children

Question

I have a problem with the onmouseover() event listener.

<div class="parent" onmouseover="myfunction()">
   <div class="child"></div>
</div>

I trigger a javascript function whenever the mouse is hovering over the parrent, but whenever I'm hovering over the child, it doesn't register the onmouseover anymore.

Is there a workaround so the onmouseover() also gets triggered while hovering over its child elements, using pure Javascript?

It would be good to understand what [event delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) is — aug, Apr 12 '17 at 21:33
Use a delegated event, ie on the parent listen for events bubbling up, then get the event target. Don'r know how to do that in vanilla js. Or maybe mouseenter event may suit your needs? — yezzz, Apr 12 '17 at 21:34
Please provide a fiddle that illustrates the issue. I cannot reproduce this problem: the `mouseover` event triggers both for the child as the parent element. — trincot, Apr 12 '17 at 21:39

score 5 · Answer 1 · edited Jun 10 '18 at 19:57

Use mouseenter event instead, which doesn't bubble with children elements like mouseoverdoes.

In other words with mouseover the event will be attached to all the element children too, so when you hover a child the event will be fired as if we left the parent div.

Demo:

document.getElementById("test").addEventListener("mouseenter", function(event) {
  var target = event.target;
  console.log(target.id);
}, false);

.child {
  min-width: 50px;
  min-height: 50px;
  padding: 10px;
  display: inline-block;
  background-color: yellow;
}

.parent {
  padding: 20px;
  background-color: red;
}

<div id="test" class="parent">
  <div id="child1" class="child">1</div>
  <div id="child2" class="child">2</div>
  <div id="child3" class="child">3</div>
  <div id="child4" class="child">4</div>
  <div id="child4" class="child">5</div>
</div>

You can see in the above snippet that using mouseenter the event is always firing even if we hover over children and only the parent id is logged, as if we didn't leave it.

Mouseover demo:

You can see the difference here using mouseover event:

document.querySelector(".parent").addEventListener("mouseover", function(event){
  console.log(event.target.id);
});

.child {
  min-width: 50px;
  min-height: 50px;
  padding: 10px;
  display: inline-block;
  background-color: yellow;
}

.parent {
  padding: 20px;
  background-color: red;
}

<div class="parent">
  <div id="child1" class="child">1</div>
  <div id="child2" class="child">2</div>
  <div id="child3" class="child">3</div>
  <div id="child4" class="child">4</div>
  <div id="child4" class="child">5</div>
</div>

onmouseover eventlistener onto all children

1 Answers1