Efficient event listener

by Julien Etienne

HTML

<section>
  <div class="one">
  One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>

CSS

section{
  width: 300px;
  height: 300px;
  background: red;
}

div {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid red;
  z-index: 0;
  position: absolute;
  background: lime;
}

.one {
  top: 50px;
}

.two {
  top: 100px;
}

.three {
  top: 150px;
}

JavaScript

var section = document.getElementsByTagName('section')[0]

var log = (num) => {
  console.log('You clicked element' + num);
}

var clickEvent = (e) => {
  let target = e.target;
  switch (target.className) {
    case 'one':
      log('One');
      break;
    case 'two':
      log('Two');
      break;
    case 'three':
      log('Three');
      break;
  }
}




// Mouse enter 
section.addEventListener('mouseenter',function(){addClick(section);},false);
section.addEventListener('mouseleave',function(){removeClick(section);},false);

function addClick(element) {
  element.addEventListener('click', clickEvent, false);
	console.log('added')
}
function removeClick(element) {
  element.removeEventListener('click', clickEvent, false);
	console.log('removed')
}