this vs event.target

HTML

<div id="outer">
  <div id="inner1">inner1</div>
  <div id="inner2">inner2</div>
  <div id="inner3">inner3</div>
</div>
<p>click trying clicking orange and red</p>
<pre></pre>

CSS

div {
  margin: 1em;
  padding: 1em;
  background: orange;
}
#outer {
  background: red;
}

JavaScript

document.querySelector('#outer').addEventListener('click', function(ev) {
  log(`this.id: ${this.id}, ev.target.id: ${ev.target.id}`);
});













































function log(msg) {
  document.querySelector('pre').textContent = msg;
}