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.
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 anyEventTarget
beneath it in the DOM tree. If not specified, defaults tofalse
.
uesCapture:
- A boolean value indicating whether events of this type will be dispatched to the registered
listener
before being dispatched to anyEventTarget
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 tofalse
.
Conclusion-
- Understanding basics of addEventListener() function in JavaScript.