Mar 06: Event Listeners

Learning Objectives

After today's class, you should be able to:

• Create new DOM elements in JavaScript when an event occurs.
• Define callbacks using function expressions and arrow functions.
• Describe the kinds of events that an application can respond to.

Lesson Outline

Demo [10 min]

• picsum.html – using picsum.photos

Take 2 [10 min]

• 14_DOM-Functions.pdf – courtesy Dr. Isaac Wang
  • Originally shown on Feb 13 (now we're ready)
• Web Console Helpers
  • $() – alias for document.querySelector() – returns an Element
  • $$() – alias for document.querySelectorAll() – returns a NodeList
  • $0 – the currently inspected element – previous elements: $1, $2, …

Slides [15 min]

• 19_Create-Events.pdf – courtesy Dr. Kirkpatrick
  • See event propagation example below
  • Optional: Live Editor – JS 9 and 12

Demo [20 min]

• Praxly application
  • Source code on GitHub

Work Time [20 min]

• Prep 7 due "tomorrow"
  • Will accept until Mon 8am (no penalty)
• Project 1 due Monday
  • One group member uploads to Canvas
  • Two pdfs: P1 Sketch and P1 Narrative
• Lab 6 due before break
  • Completed individually (as always)
  • May require reading, experimentation

Event Propagation

document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked (bubbling)");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked (capturing)");
}, true);  // optional 3rd parameter -- capture: true

When you click the child element, the console logs:

Parent clicked (capturing)
Child clicked
Parent clicked (bubbling)