事件冒泡，事件捕获和事件冒泡

DOM0级事件是不支持捕获阶段的，DOM2级事件才支持。然而，DOM二级事件分为W3C和IE两种事件模型

• 事件冒泡是son-dad的顺序执行代码，而事件捕获是dad-son的顺序执行代码
• (W3C)捕获阶段-处于目标阶段-冒泡阶段
• (IE)处于目标阶段-冒泡阶段
• addEvenListener()第三个参数表示出发时间 的阶段，默认值为false(冒泡阶段触发)，true(捕获阶段触发)

baba.addEvenlistener("click",function(){},true)表示点击事件在捕获阶段触发

• 阻止事件冒泡就相当于是在事件冒泡的过程中将链子切断，因此后续的冒泡无法冒出
• 阻止事件冒泡，首先要获取事件对象，随后使用stopPropagation()方法进行事件冒泡的阻止

son.addEventListener("click",function(e){
//              阻止事件冒泡
                console.log(e);
                e.stopPropagation();
                alert("我是son");
                
            },true)

• 阻止默认事件的发生，则使用preventDefault()方法

            var t=0;
            btnReport.addEventListener("click",function(e){
//              阻止默认事件  
                e.preventDefault();
//              向后台发送请求,记录用户点击
                console.log(t++);
                location.href="//www.baidu.com";//只写两个斜杠能够让页面自行选择协议
            })

• 事件委托，就是通过事件冒泡的原理将当前节点的事件注册到该节点的父级节点中，阻止事件冒泡往往只有第一个元素能够执行，使用事件委托能够使后续的元素乃至生成的节点都能执行相应的代码

使用事件委托，就是在父类编写子类需要执行的代码，在子类上触发事件时，由于事件冒泡，执行了子类的代码后会执行父类的代码，所以就可以利用父类进行子类的代码实现

//          使用事件委托
            baba.addEventListener("click",function(e){
//              console.log("当前点击的元素是",e.target.className);
                if(e.target.className=="son"&&e.target.nodeName=="DIV"){
                    alert("我是儿子");
                }
            })

使用e.target就可以获取到事件触发的具体节点