Reply To: Learning JS

[__]

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 article.comment to section#comments to body to html.

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.