JavaScript HTML DOM EventListener
addEventListener() method
addEventListener() method is used to add an event handler to the specified element.
The event handle added by the addEventListener() method will not overwrite the existing event handle.
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, JavaScript is separated from the HTML markup, making it more readable. You can also add event listeners without controlling the HTML markup.
You can use the removeEventListener() method to remove event listening.
Syntax
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 is bubbling or capturing. This parameter is optional.
Note:Do not use the "on" prefix. For example, use "click" instead of "onclick".
php中文网(php.cn)
Add multiple event handlers to the same element
The addEventListener() method allows adding multiple events to the same element without overwriting existing events:
php中文网(php.cn)
Add event handlers to Window objects
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.
php中文网(php.cn) 尝试重置浏览器的窗口触发 "resize" 事件句柄。
Passing parameters
When passing parameter values, use "anonymous functions" to call functions with parameters:
php中文网(php.cn)
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, which element's "click" event will be triggered first?
In bubbling, the event of the internal element will be triggered first, and then the external element, that is: the click event of the
element will be triggered first, and then the click event of the
In capture, the event of the external element will be triggered first, and then the event of the internal element will be triggered, that is: the click event of the
element will be triggered. Click event.
The addEventListener() method can specify the "useCapture" parameter to set the delivery type:
addEventListener(event, function, useCapture);
Default value If it is false, it means bubble delivery. When the value is true, the event will be delivered using capture.
php中文网(php.cn) 点击段落，我是冒泡。
点击段落，我是捕获。
removeEventListener() method
removeEventListener() method removes the event handler added by the addEventListener() method:
php中文网(php.cn) div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。点击按钮移除 DIV 的事件句柄。
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
