Make appended children to also trigger parent element

Question

I have appended 2 buttons for each li element in my app:

  todoLi.appendChild(this.createToggleButton());
  todoLi.appendChild(this.createDeleteButton());

Later, I added event listeners to trigger when li is moused over and out

todosUl.addEventListener('mouseover', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi') {
    elementMousedOver.lastElementChild.style.display = 'inline';
  }
});
todosUl.addEventListener('mouseout', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi') {
    elementMousedOver.lastElementChild.style.display = 'none';
  }
});

Everything works fine for li element, but when I mouse over the buttons, that are children of the li element, event listeners stop working for some reason if the bottons were not children of li element after all.

How can I make appended children to also trigger its parent's event listener?

Here is my app on github: https://mikestepanov.github.io/

repo with files: https://github.com/mikestepanov/mikestepanov.github.io

Not really clear what expectations are. If mouse is over the `
@JosanIracheta I must say that HTML is implicitly included in the question (`Ul`, `Li`, `Button`s). — ibrahim mahrir, Nov 25 '17 at 23:59
@JosanIracheta here is my HTML : https://github.com/mikestepanov/mikestepanov.github.io/blob/master/index.html — , Nov 25 '17 at 23:59
@Mikhail unless the `button` elements also contain the `className` of "todoLi", they will be disregarded — JJJ, Nov 26 '17 at 00:01
@charlietfl if I mouse over li or any child of li, it will trigger li element if I put its children through regular html. However, it does not work for me if I append children in javascript — , Nov 26 '17 at 00:03
@Mikhail if you look at this fiddle, you will notice that the `mouseover` event is being triggered: https://jsfiddle.net/o97jqz50/. I am pretty sure that your `button` elements do not have the same `className` as your `li` elements and therefore your conditional statement is not being executed — JJJ, Nov 26 '17 at 00:05
Possible duplicate of [What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — ibrahim mahrir, Nov 26 '17 at 00:11

score 0 · Accepted Answer · answered Nov 26 '17 at 00:07

Events by default are bubbling up the DOM, therefore the event triggered from the li will trigger the ul as well, the issue is that your if statement will handle only the cases in which the event's target is the ul (className == "todoLi")

var todosUl = document.getElementsByClassName("todo")[0];
todosUl.addEventListener('mouseover', function(event) {
  let eOver = event.target;
  if(eOver.className == 'todo') {
  //for the ul
    console.log("I'm handeled from " + eOver.className);
  } else if (eOver.className == 'item') {
  //for the li
    console.log("I'm handeled from " + eOver.className);
  }
});
todosUl.addEventListener('mouseout', function(event) {
  let eOver = event.target;
  if(eOver.className == 'todo') {
  //for the ul
    console.log("I'm handeled from " + eOver.className);
  } else if (eOver.className == 'item') {
  //for the li
   console.log("I'm handeled from " + eOver.className);
  }
});

ul{
  padding: 15px;
  background: lightblue;
}
li{ 
  background: grey;
  padding: 5px 5px;
  }

<ul class="todo">
  <li class="item">Do it!!</li>
</ul>

score 0 · Answer 2 · answered Nov 26 '17 at 00:12

The problem here lies with the conditional statement. Simply modify your conditional statement to include the button element and it should work.

todosUl.addEventListener('mouseover', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi' || 
    elementMousedOver.tagName === "BUTTON") {
    elementMousedOver.lastElementChild.style.display = 'inline';
  }
});

Make appended children to also trigger parent element

2 Answers2