Learn
You have the following HTML structure:
<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:
function 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:
<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:
- Add an event handler to each mole separately
- 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?
Posted by Henning Koch to makandra Curriculum (2015-09-09 08:55)