The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Learning JS 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:


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.