JavaScriptDOM event flow

JavaScriptDOM event flow

The DOM event flow is divided into three stages: 1. Capture stage 2. Current target stage 3. Bubbling stage

JS code can only get one of the capture phase or the bubbling phase

onclick and attachEvent can only get the bubbling phase

Capture phase: If the third parameter of addEventListener is true, it is in the capture phase document-->html-->body-->father-->son

Bubbling stage: If the third parameter of addEventListener is false or omitted, it is in the bubbling stage son-->father-->body-->html-->document

Some events are not bubbling, such as: onfocus, onblur, onmouseover

.father {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: paleturquoise;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
}
<div class="father">
        <div class="son">son盒子</div>
</div>
<script>
		var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true); //根据捕获阶段的顺序，先弹出father，再弹出son
</script>

		var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
                alert('document');
       });  //根据冒泡阶段的顺序，先弹出son，再弹出father，再弹出document