<div id='container1'>
  <p class='paragraph'>
    <b>event.target</b><br/><br/>
    Try clicking the paragraph or the button<br/><br/>
    When you click on any element here, the tag name would show in the alert modal. The click event listener is uses the 'target' property.
  </p>
  <button class='button'>
    A button
  </button>
</div>

<div id='container2'>
  <p class='paragraph'>
    <b>event.currentTarget</b><br/><br/>
    Try clicking the paragraph or the button<br/><br/>
     When you click on any element here, the tag name of the main container would show in the alert modal. The click event listener is uses the 'currentTarget' property which references the element which the event listener was attached to.
  </p>
  <button class='button'>
    A button
  </button>
</div>

#container1, #container2 {
  display: inline-block;
  margin: 10px;
}
#container1 {
  width: 400px;
  border: 1px solid orange;
  height: 300px;
}

#container2 {
  width: 400px;
  border: 1px solid blue;
  height: 300px;
}

let container1 = document.querySelector('#container1');
function eventController1(event) {
  alert(event.target.tagName);
}
container1.addEventListener('click', eventController1, false)

let container2 = document.querySelector('#container2');
function eventController2(event) {
  alert(event.currentTarget.tagName);
}
container2.addEventListener('click', eventController2, false)