What different between e.target and e.currentTarget

e.target, this and e.currentTartet - what the real different?

by Dmytro Chumak

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h2>e.target vs e.currentTarget:</h2>
<p>e.target keep an object that trigger 'click' event - li. In it's turn, the e.currentTarget refers to the element to which handler was attached. It's mean that e.currentTarget === ul === this.</p>
<ul id="ul" class="ul">
  <li id="li" class="li btn btn-primary">Click me, please!</li>
</ul>

CSS

p,
h2 {
  margin: 1rem 2.5rem;
}

JavaScript

var ul, handler;

ul = document.getElementById('ul');
handler = function(e) {
  alert(e.target.id + ' != ' + e.currentTarget.id);
};

ul.addEventListener('click', handler);