The “trigger” is the
addEventListener part. You’ll need to read up on event handling to get a thorough understanding, but the basic setup is like so:
- some event happens (e.g., a click).
- the event “captures” (moves from the top of the document down the the element that was actually clicked)*
- the event “bubbles” (moves from the element clicked up to the top of the document)
- when a DOM element has a “listener” and an event bubbles past it, that listener runs a function (an “event handler”).
* browsers do things differently. don’t rely on event capturing. bubbling is more reliable (and makes more sense, IMO). use bubbling.
So, we have this (relevant) structure:
html body section#comments article.comment button
When someone clicks on the button, it creates a “click” event. That event bubbles from the
button up to
section#comments has our event listener. When the click event bubbles past, the listener runs the
replybox_onClick function (which I just realized is badly named, but whatever). It passes the event object to the function (as the
event argument), and the function does its thing.
edit: I changed the event handler name because it was bad. I know this pen will probably never even be looked at again but it bugged me.