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 asclick,mousedownEtc.
  • 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:

  1. event.target

    The event.target property returns the element that triggered/generated/generated the event. Elements that can be understood as user actions.

  2. 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.

  3. 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

  4. 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.