DOM is the interface for JS to operate web pages, known as the Document Object Model. Its purpose is to turn a web page into a JS object that can be manipulated with scripts (such as adding and deleting content).

The DOM2 Events specification specifies that the event flow is divided into three phases: event capture, arrival to target, and event bubbling. Event capture occurs first, making it possible to intercept events ahead of time. The actual target element then receives the event. The last stage is bubbling, and events must be responded to at the latest

Add e.topPropagation () to any element that needs to prevent bubbles

Some events do not bubble, such as onClur, onFocus, onMouseEnter, onmouseleave

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px auto;
            padding: 10px;
        }
        .son{
            float: left;
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-left: 50px;
            margin-top: 50px;
        }
        p{
            text-align: center;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"><p>Son box</p></div>
        <div style="clear:both;"></div>
    </div>
    <script>
        // DOM events flow in three phases
        // Only one of the phases can be captured or bubbled in 1.js code
        // 2. Onclick and attachEvent can only get bubbling stages
        If the third addEventListener parameter is true, the listener is in the capture phase
        // document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click'.function(){
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click'.function(){
            alert('father');
        },true);
        
        The addEventListener is bubbling if the third parameter false is omitted
        // son -> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click'.function(e){
            alert('son');
            //e.stopPropagation(); // Prevent bubbling
        },false);
        // There is no bubbling prevention added to the parent element, so the document click event will still be executed when the parent element area is clicked
        var father = document.querySelector('.father');
        father.addEventListener('click'.function(){
            alert('father');
        });
        document.addEventListener('click'.function(){
            alert('document');
        })
    </script>
</body>
</html>
Copy the code

The effect

Capture stage:

Bubbling stage: