Understanding addEventListener() in JavaScript.

Understanding addEventListener() in JavaScript.

Understanding addEventListener() in JavaScript.
  • The addEventListener() method attaches an event handler to the specified element. It allows you to attach multiple event listeners to the same element. It has the following syntax:

  • addEventListener(type, listener)

  • addEventListener(type, listener, options)

  • addEventListener(type, listener, useCapture)

  • There are only two parameters that are used very frequently that are (type, listener).

Tpye:

  • It is case-sensitive string that represents all the event tpyes. Link to all the event types are as follows.

  • Link- All Event Listener click here

Listener:

  • The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs.

  • This is usually a function that we will define to do a particular task when a specific event happens.

Capture:

  • A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. If not specified, defaults to false.

uesCapture:

  • A boolean value 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.

Conclusion-

  • Understanding basics of addEventListener() function in JavaScript.