HTML DOM EventListener

JavaScript HTML DOM EventListener

---

AddEventListener() method

The addEventListener() method is used to add event handles to the specified element.

Event handles added by the addEventListener() method do not override existing event handles.

You can add multiple event handles to an element.

You can add multiple event handles of the same type to the same element, such as two "click" events.

You can add event listening to any DOM object, not just HTML elements. Such as: window object.

The addEventListener() method provides easier control over events (bubbles and captures).

When you use the addEventListener() method, JavaScript is separated from HTML tags, more readable, and can also add event listening without control over HTML tags.

You can use the removeEventListener() method to remove the monitoring of events.

---

Grammar

The first argument is the type of event (such as "click" or "mousedown").

The second argument is the function called after the event is triggered.

The third argument is a Boolean value that describes whether the event is bubbling or captured. This parameter is optional.

	Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

---

Add an event handle to the original element

You can use the function name to refer to an external function:

---

Add multiple event handles to the same element

The addEventListener() method allows multiple events to be added to the same element without overwriting existing events:

You can add different types of events to the same element:

Tip: You can get more information about the addEventListener() method in the HTML DOM addEventListener() method section of this site!

---

Add an event handle to the Window object

The addEventListener() method allows you to add event listening to HTML DOM objects such as HTML elements, HTML documents, window objects. Or other spent event objects such as: xmlHttpRequest object.

---

Pass the parameters

When passing argument values, use anonymous functions to call functions with parameters:

---

Event bubbling or event capture?

Events are delivered in two ways: bubbling and capturing.

Event delivery defines the order in which element events are triggered. If you insert the element into the element, and the user clicks on the element, which element's "click" event is triggered first?

In a bubbling, the event of the internal element is triggered first, and then the external element is triggered, i.e., the click event of the element is triggered first, and then the click event of the element is triggered.

In a capture, an event for an external element is triggered before an event for an internal element is triggered, that is, a click event for an element is triggered first, and then a click event for an element is triggered.

The addEventListener() method can specify the "useCapture" parameter to set the delivery type:

The default value is false, i.e. bubble pass, and when the value is true, the event uses capture pass.

Tip: T he DOM event flow supports two event models: capture events and bubbling events, which occur first. Capture and bubbling events touch all objects in the DOM, starting with the document object and ending with the document object.

---

RemoveEventListener() method

The removeEventListener() method removes the event handle added by the addEventListener() method:

---

Browser support

The numbers in the table support the version number of the first browser for this method.

Method
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

Note: I E 8 and earlier versions of IE, Opera 7.0 and earlier do not support the addEventListener() and removeEventListener() methods. However, for this type of browser version, you can use the detachEvent() method to remove the event handle:

---

HTML DOM event object reference manual

For all HTML DOM events, check out our complete HTML DOM Event Object Reference Manual.