红宝石第十三章事件系统

事件的常用属性

阻止默认行为：cancelable，preventDefault()
执行目标：currentTarget（正在执行的对象），target（当前执行真正的目标），this
阻止冒泡：stopPropagation()
事件类型：type
事件阶段：eventPhase，1，捕获，2，目标，3，冒泡
如下图把btn的click事件取消绑定，这个时候点击btn，事件不会得到响应，但是由于事件冒泡，点击按钮，会打印出：
我是我是wrap 3 body 3 ，

            var wrap1 = document.getElementById('wrapper1');
            var btn1 = document.getElementById('btn1');
            
            var alertFuncBody = function() {
                console.log('我是body');
                console.log(event.eventPhase);
            }

            var alertFuncParent = function(event) {
                console.log('我是wrap');
                console.log(event.eventPhase);
            }
            
            // var alertFunc = function(event) {
            //     console.log('我是孩子');
            //     console.log(event.eventPhase);
            //     //event.stopPropagation();//1
            // }
            
            document.body.addEventListener('click', alertFuncBody, false);//2
            wrap1.addEventListener('click', alertFuncParent, false);//3
            //btn1.addEventListener('click', alertFunc, true);//4

再做如下实现：点击btn，则会打印出注释的结果

            var wrap1 = document.getElementById('wrapper1');
            var btn1 = document.getElementById('btn1');
            
            var alertFuncBody = function() {
                console.log('我是body');
                console.log(event.eventPhase);  //3
                console.log(event.target === this); //false
                console.log(event.target === btn1); //true
                console.log(event.currentTarget === document.body); //true
                console.log(event.currentTarget === this); //true
            }

            var alertFuncParent = function(event) {
                console.log('我是wrap');
                console.log(event.eventPhase);//3
                console.log(event.target === this); //false
                console.log(event.target === btn1); //true
                console.log(event.currentTarget === wrap1); //true
                console.log(event.currentTarget === this); //true
            }

            document.body.addEventListener('click', alertFuncBody, false);//2
            wrap1.addEventListener('click', alertFuncParent, false);//3
            //btn1.addEventListener('click', alertFunc, true);//4

事件的不同阶段

事件分捕获和冒泡，捕获是按照 html——> document——> body ——> div ——> button的顺序，冒泡则刚好相反。
event.eventPhase可以看当前处于冒泡还是捕获阶段
1：捕获阶段
2：目标阶段
3：冒泡阶段

如下代码1，2，3，4处
默认：
点击body： 我是body 2目标阶段
点击wrap1: 我是body 1捕获阶段 我是wrap 2目标阶段
点击btn1: 我是body 1捕获阶段，我是wrap 1捕获阶段 我是孩子 2目标阶段
把4处变成false:
点击body： 我是body 2
点击wrap1: 我是body 1 我是wrap 2
点击btn1: 我是body 1 我是wrap 1 我是孩子 2
再把3，4处变成false
点击body： 我是body 2
点击wrap1: 我是body 1 我是wrap 2
点击btn1: 我是body 1 我是孩子 2 我是wrap 3
再把2处变成false
点击body： 我是body 2
点击wrap1: 我是body 1 我是wrap 2
点击btn1: 我是body 1 我是孩子 2 我是wrap 3
代码示例：

html
    <div 
        id='wrapper1'
        style="background: green;
        width: 200px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center">
        <button  id='btn1'>我是按钮</button>
    </div>
    <div 
        id='wrapper2'
        style="background: red;
        width: 200px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center">
        <button  id='btn2'>我是按钮</button>
    </div>

javascript
 window.onload = function() {
            var wrap1 = document.getElementById('wrapper1');
            var btn1 = document.getElementById('btn1');
            
            var alertFuncBody = function() {
                console.log('我是body');
                console.log(event.eventPhase);
            }

            var alertFuncParent = function(event) {
                console.log('我是wrap');
                console.log(event.eventPhase);
            }
            
            var alertFunc = function(event) {
                console.log('我是孩子');
                console.log(event.eventPhase);
                //event.stopPropagation();//1
            }
            
            document.body.addEventListener('click', alertFuncBody, true);//2
            wrap1.addEventListener('click', alertFuncParent, true);//3
            btn1.addEventListener('click', alertFunc, true);//4
}