JavaScript uses EventListener to operate on HTML DOM_Basic knowledge

addEventListener() method
Example
The listening event is triggered when the user clicks the button:

document.getElementById("myBtn").addEventListener("click", displayDate);

The addEventListener() method is used to add an event handler to the specified element.
The event handler added by the addEventListener() method will not overwrite the existing event handler.
You can add multiple event handlers to an element.
You can add multiple event handlers of the same type to the same element, such as two "click" events.
You can add event listeners to any DOM object, not just HTML elements. Such as: window object.
The addEventListener() method makes it easier to control events (bubbling and capturing).
When you use the addEventListener() method, the JavaScript is separated from the HTML markup, making it more readable, and you can add event listeners without controlling the HTML markup.
You can use the removeEventListener() method to remove event listeners.
Grammar

element.addEventListener(event, function, useCapture);

The first parameter is the type of event (such as "click" or "mousedown").
The second parameter is the function called after the event is triggered.
The third parameter is a Boolean value used to describe whether the event bubbles or captures. This parameter is optional.
Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

Add event handler to original element
Example
"Hello World!" pops up when the user clicks on the element:

element.addEventListener("click", function(){ alert("Hello World!"); });

You can use function names to reference external functions:
Example
"Hello World!" pops up when the user clicks on the element:

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

Add multiple event handlers to the same element
The addEventListener() method allows adding multiple events to the same element without overwriting existing events:
Example

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

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

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Add an event handler to the Window object
The addEventListener() method allows you to add event listeners to HTML DOM objects such as HTML elements, HTML documents, and window objects. Or other expenditure event objects such as: xmlHttpRequest object.
Example
Add an event listener when the user resets the window size:

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

Pass parameters
When passing parameter values, use "anonymous functions" to call functions with parameters:
Example

element.addEventListener("click", function(){ myFunction(p1, p2); });

Event bubbling or event capturing?
There are two ways of event delivery: bubbling and capturing.
Event delivery defines the order in which element events are fired. If you insert a

element into a

element, and the user clicks on the

element, which element's "click" event will be triggered first?
In bubbling, the event of the inner element will be triggered first, and then the outer element, that is: the click event of the

element will be triggered first, and then the click event of the

element will be triggered.
In capture, the event of the outer element will be triggered first, and then the event of the inner element will be triggered, that is: the click event of the

element will be triggered first, and then the click event of the

element will be triggered.
The addEventListener() method can specify the "useCapture" parameter to set the delivery type:

addEventListener(event, function, useCapture);

The default value is false, which means bubble delivery. When the value is true, the event is delivered using capture.
Example
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Try it »

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

element.removeEventListener("mousemove", myFunction);

Browser support
The numbers in the table represent the version number of the first browser that supports this method.

Note: IE 8 and earlier IE versions, Opera 7.0 and earlier versions do not support the addEventListener() and removeEventListener() methods. However, for such browser versions the event handler can be removed using the detachEvent() method:

element.attachEvent(event, function);
element.detachEvent(event, function);

Example
Cross-browser workaround:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);