Skip to content

Instantly share code, notes, and snippets.

@e-l-i-s-e
Last active May 3, 2019 15:46
Show Gist options
  • Select an option

  • Save e-l-i-s-e/8398367af404a1cbfd094de6e1ea604f to your computer and use it in GitHub Desktop.

Select an option

Save e-l-i-s-e/8398367af404a1cbfd094de6e1ea604f to your computer and use it in GitHub Desktop.

Events and Event Listeners

Pre-work

NOTE the pre-work lab has a repo that must be opened for students when the pre-reading is opened

Objective

Events and event listeners are one of the most basic mechanisms for wiring JavaScript to user interactions (such as clicks). Students will start to learn about events and handling events in JavaScript.

Needs Statement

By the end, students should understand how to:

  • add event listeners
  • remove event listeners
  • listen for events on a page
  • optimize by leveraging event delegation

Key Topics

Events, Event Listeners, bubbling & delegation, this & bind()

Lesson

Pair Exercise - Pixelate

Assets Time
SLIDES event-listeners-and-handlers.key
LECTURE Sample Lecture (1802-RM)
Sample Lecture (1806-GH)
Sample Lecture (1809-CH)
30 Min
Workshop learndot 2:30 Hrs
Starting Point Github
Solution Github solution branch

Homework

Assets Time
Pixelate Review Video

Notes

It is sometimes useful to have students complete a small lab before the lecture, and this approach works very well for this module. Students tend to ask better questions during the lecture and retain more. So, the instructor is encouraged to do Whack-a-mole first, followed by the Event Listeners and Handlers lecture, and finally the Pixelate Pair Exercise.

EB and GLL decided to make the lab pre-work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment