The DOM event model in this article is the DOM Level 2 model (the W3C standard model), which is supported by modern browsers.
Event capture and bubbling
In this event model, an event has three processes:
- Capture Phase: The event starts from the Window object to the parent of the target element (from outside to inside).
- Target Phase: The event reaches the Target element.
- Bubbling Phase: Events go from the parent of the target element to the Window object (inside out).
This process can be illustrated by the following code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>DOM</title>
<style media="screen">
#div {
width: 300px;
height: 100px;
background: blue;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="div">Clicking on the target element triggers the event</div>
<script type="text/javascript">
let div = document.querySelector('#div')
// Capture the phase event function
const f1 = function (e) {
console.log('Capture Captrue' + this.toString());
}
// Bubble phase event function
const f2 = function (e) {
console.log('Bubbling' + this.toString());
}
// Capture phase listener function
div.addEventListener('click', f1, true);// Target element listener function
window.addEventListener('click', f1, true); // the window node listens for functions
document.addEventListener('click', f1, true); // the document node listens for functions
document.documentElement.addEventListener('click', f1, true); // HTML node listener function
document.body.addEventListener('click', f1, true); // The body node listens for the function
// Bubble phase listener function
div.addEventListener('click', f2); // Target element listener function
window.addEventListener('click', f2); // the window node listens for functions
document.addEventListener('click', f2); // the document node listens for functions
document.documentElement.addEventListener('click', f2); // HTML node listener function
document.body.addEventListener('click', f2); // The body node listens for the function
</script>
</body>
</html>
Copy the code
The processing of the event model can be clearly seen in the following figure:
Trap: When multiple listening events are triggered in the target phase, there is no distinction between capturing and bubbling, but the execution is performed in the order in which the listeners are bound.
Event listener function
AddEventListener (): Used to add event listeners for elements
element.addEventListener(eventType, function.useCapture);
Copy the code
Parameters:
- The first is the type of event to listen for, such as
click
,mousedown
Etc. - The second is the function called after the event starts
- The third parameter is of type Boolean, indicating whether the event listens for the bubble phase or capture phase, true for capture, false for bubbling, and the default is false for the bubble phase
The Event object
The Event object represents the state of the Event, such as the element in which the Event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button. The event object is passed in as an argument to the callback function that executes when the event is fired.
Some properties and methods:
-
event.target
The event.target property returns the element that triggered/generated/generated the event. Elements that can be understood as user actions.
-
event.currentTarget
The event.currentTarget attribute is the element bound to the event. Can be understood as the element in which the listener resides. CurrentTarget, but this is not recommended as it is more readable.
-
event.stopPropagation()
This method prevents the current event from passing through the capture and bubbling stages.
dom.addEventListenner('click'.function(event){ event.stopPropagation(); // The event does not continue }) Copy the code
-
event.preventDefault()
Cancel the event (that is, cancel the default/default behavior of the event) if the event can be canceled. However, the event will not be affected, and the event will continue to be delivered.
a.addEventListenner('click'.function(event){ event.preventDefault(); // Block the default jump event for the A tag }) Copy the code
Tip: event.target points to the element that triggers the event. Event.currenttarget points to the element that listens for the event.