this vs event.target

by Gregg Tavares

HTML

<div id="container">
  container
  <div id="inner">
    inner
  </div>
</div>
<pre id="status"></pre>

CSS

div { margin: 1em; padding: 1em; }
#container { background: lightblue; }
#inner { background: pink; }

JavaScript

const status = document.querySelector('#status');
document.querySelector('#container').addEventListener('mousemove', function(event) {
  status.innerText = `
this.id: ${this.id}
event.target.id: ${event.target.id}
${event.clientX}, ${event.clientY}`;
});