How to configure the HTML DOM addEventListener() Method

HTML DOM addEventListener() Method

As time goes on it appears that this Event handler technique is key to the manipulation of the DOM.

The code is in the Javascript that "feeds" the Accordion functionality that I was using on my Site Map and other pages. I have expanded on my analysis of the accordian

Events can be added to many DOM ELements, other places where I have seen this on pages that feature on this website are the page search example and the accessibilty code for the carousel

The syntax of the addEventListener() method are shown below and there is significance to the Bubbling and Capturing of the events - this is especially relevant to the example below. Or maybe not as I was assuming that the Bubbling and Capturing were handled by the return value of the function - there is no third parameter in that example.

However, there is a discussion related to the third parameter

Top

The Javascript code taken from the accordian example:

I was using the accordian on my Javascript page where I was attempting to look and try to understand the code.

The "event" is added to elements of an array "acc[i]" that is the contents of the accordian button. The contents of the accordian button is a div with the class="panel". The panel div is the element after the button element and therefore the nextSiblng. It contains the text from the section to be expanded. The "selctor?" nextElementSibling is used as this returns the next sibling node as an element node (i.e. it ignores the text and comment nodes)

The click is added as an event (note: "click" as oppssed to "onClick")and an "anonymous function" is used as the seconed parameter.

There is no third (optional) parameter, the useCapture parameter as the event handler is required to be executed during the bubbling phase.

The this.classList.toggle bit toggles the panel from non active to active.

The syntax is:

document.addEventListener(event, function, useCapture)

Where:

Parameter Description

event Required. A String that specifies the name of the event.

Note: Do not use the "on" prefix. For example, use "click" instead of "onclick". For a list of all HTML DOM events, look at our complete HTML DOM Event Object Reference. https://www.w3schools.com/jsref/dom_obj_event.asp function Required. Specifies the function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. useCapture Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. Possible values: true - The event handler is executed in the capturing phase false- Default. The event handler is executed in the bubbling phase

The useCapture parameter of addEventListener()

This is explained in more detail on the MDN pages.

" A Boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false. "

For a practical example of the handling of events in both the Capturing and Bubbling phases please see my page on the accordian.

There is a LOT going on in the script for the accordian - I have tried to explain it here

The third parameter of addEventListener()

This is also explained in more detail on the MDN pages.

" In older versions of the DOM specification, the third parameter of addEventListener() was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.

Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in. "

HTML DOM addEventListener() Method

Links