JavaScript uses EventListener to operate on HTML DOM_Basic knowledge-JS Tutorial-php.cn

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

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

Copy after login

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);

Copy after login

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!"); });

Copy after login

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!");
}

Copy after login

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);

Copy after login

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

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

Copy after login

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;
});

Copy after login

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

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

Copy after login

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);

Copy after login

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);

Copy after login

Browser support
The numbers in the table represent the version number of the first browser that supports this method.
JavaScript uses EventListener to operate on HTML DOM_Basic knowledge
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);

Copy after login

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);

Copy after login

Related labels：

dom javascript

source：php.cn

Previous article：js only loads the verification code example code after clicking the text box_javascript skills Next article：Sorting method of JavaScript object array_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn