JavaScript Event Delegation

How JavaScript Event Delegation Works

by Dmytro Chumak

HTML

<ul class="parent">
  <li><a href="">children-1</a></li>
  <li><a href="">children-2</a></li>
  <li><a href="">children-3</a></li>
  <li class="active"><a href="">children-4</a></li>
  <li><a href="">children-5</a></li>
</ul>
<br>
Active element - <span class="result">children-4</span>

CSS

.parent li.active {
  color: red;
  font-weight: bold;
}

.result {
  font-weight: 700;
}

JavaScript

var parent = document.querySelector('.parent');
var result = document.querySelector('.result');

parent.addEventListener('click', function(e){
	const target = e.target;
  const li = e.target.parentNode;
  
	if ( target && target.nodeName === 'A') {
		e.preventDefault();
    result.innerHTML = target.innerHTML;
   
    // Remove active from siblings
    [].map.call(li.parentNode.children, function(children){
    	if (children !== li) {
      	children.classList.remove('active')
      }
  	})
    
    // Add/remove active on current element
    li.matches('.active') ? li.classList.remove('active') : li.classList.add('active');  
  }
})