Episode 21 game · Raiden · Lightning
Raiden’s Relay
Kai gave every ✕ button its own click listener when the page loaded. Rows he adds later stay deaf. Feel the dead button, fix it with one listener on the list and closest(), then prove a single listener handles every row, old or new.
ul#list1 listenerClicks will show up here.
- click listeners on ✕ buttons0
- click listeners on ul#list0
- deaf ✕ buttons0
1 · Feel the deaf button
Three rows were there when the page loaded, and each ✕ got a listener. Add a row the way Kai does, then click the new row’s ✕.
2 · Delegate it
Build Raiden’s listener one line at a time. Each card is one line of the fix.
3 · The relay test
Raiden also wants a row to glow when its checkbox gets keyboard focus, with the listener on the list too. Pick the event, then run the test: it adds 50 rows and clicks them for real.
New seal earned
The Hundred Ears fell quiet
Acharya’s Rule #21Listen once on the parent, and let closest() tell you who was clicked.
querySelectorAll() returns a static list. Listeners added from it never reach elements added later.
A click on a button travels up through the li and the ul. One listener on the list hears every row.
event.target.closest('.delete') finds the button even when the click lands on its icon. focus doesn’t bubble: delegate focusin.