Sun Dial Menu
addEventListener
Tempusfugit UK
 

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 code taken from the accordian example:

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

I have added an event to the pre tag above to load the accordian page. I have also added a "help" cursor.

I am also using the accordian on my Javascript page where I am 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.

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.

Top Menu

Links

External

Top Menu

Site design by Tempusfugit Web Design -