225 Event bubbling and delegation [1.5d]

Learn

You have the following HTML structure:

Copy<div class='some-class'>...</div>

<div class='container'>
  <div class='my-target'>...</div>
  <div class='my-target'>...</div>
  <div class='my-target'>...</div>
</div>

<div class='other-class'>...</div>

If you want to run Javascript code whenever someone clicks on a <div class='my-target'>...</div>, you can do this in three different ways:

Copyfunction code(event) {
  alert("Someone clicked on .my-target!");
}

document.addEventListener('click', function(event) {
  if (event.target.closest('.my-target')) {
    code(event)
  }
})

document.querySelector('.container').addEventListener('click', function(event) {
  if (event.target.closest('.my-target')) {
    code(event)
  }
})

for (let target of document.querySelectorAll('.my-target')) {
  target.addEventListener('click', code)
}

Use the resources below and talk with your mentor to find out the pros and cons of each approach.
You should at least talk about the following issues and tradeoffs:

• Registering many handlers vs. having many unnecessary target element checks in JavaScript.
• Ability to stop event propagation.
• Ability to work with elements that are created programmatically after the initial page load.

Furthermore, you should gain a solid understanding about the differences of stopPropagation(), stopImmediatePropagation() and preventDefault().

Resources

• Bubbling and capturing Show archive.org snapshot
• A primer on event delegation Show archive.org snapshot
• How to implement event delegation without a library
• Canceling event propagation
• event.target vs. event.currentTarget Show archive.org snapshot

Exercise: Whac-A-Mole

We will implement a simplified version of Whac-A-Mole Show archive.org snapshot in HTML and Javascript.

Start with this HTML structure:

Copy<div class="arena">
  <div class="mole"></div>
  <div class="mole"></div>
  <div class="mole"></div>
  <div class="mole"></div>
  <div class="mole"></div>
  <div class="mole"></div>
</div>

<div class="score">
</div>

<div class="time-left">
</div>

Now add some Javascript to implement the following game:

• The player's score is displayed on the screen. The player starts with a score of 0.
• The arena randomly shows 1 out of 6 total moles.
• The aim of the game is to click on the currently visible mole as fast as possible.
• Whenever the user clicks within the arena, the moles are randomly hidden or shown.
• When the user clicks on a visible mole, she gets 10 points added to her score. When the user clicks on a hidden mole, she gets 25 points substracted from her score.
• The player has 30 seconds to rack up as many point as she can. The remaining time is shown next to the score.
• When the time is up, a Javascript alert pops up, informing the player about her final score. Pressing "OK" starts another game.

Build two different implementations of this:

1. Add an event handler to each mole separately
2. Once the game works, use event delegation to minimize the number of event handlers to as low a number as possible. How low can you get? What pieces of Javascript can we not implement using delegation?