事件机制（冒泡和捕获）

事件响应链

1.事件的三个阶段:

先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发

事件经过所有元素都没有被处理,这个事件消失

事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系

2.默认在冒泡的时候执行事件:onclick/attach和 addEventListener传false的时候

3.addEventListener绑定事件，如果把第三个参数设置为true，则在捕捉的时候执行事件

4.focus,blur,change,submit,reset,select等事件不冒泡

box.addEventListener("click",funciton(){

console.log(123)
},true)

//捕获阶段触发

box.addEventListener("click",funciton(){

console.log(123)
},false)

//冒泡阶段触发

addEventListener的第三个参数true是阻止事件传递还是false?

答：都不是，都不会阻止事件传递，因为true是捕获阶段触发，false是在冒泡阶段触发；要阻止事件传递唯一的方式就是阻止事件冒泡：事件对象调用stopPropagation()

阻止冒泡和系统默认事件

1、阻止事件冒泡:

event.stopPropagation();W3C标准 ；只阻止冒泡不能阻止捕获。阻止向父级元素冒泡，不可以阻止默认的跳转系统事件

 

stopImmediatePropagation()方法，这个不仅会阻止事件向祖元素的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时)；支持stopPropagation的浏览器中也可以用；阻止程序传递执行冒泡，阻止不了默认的跳转系统事件

 

        box1.addEventListener("mousedown",function(el){

            console.log("box1111111",el);

        })

        box3.addEventListener("click",function(el){

            console.log("box222222",el);

            el.stopImmediatePropagation()

        })

        box3.addEventListener("click",function(el){

            console.log("box333333",el);

        })

//打印，box111111   box222222

为什么不打印box33333===>因为  el.stopImmediatePropagation()的运行阻止了下面代码的运行

为什么还是打印了box1111呢=====>因为box1的触发事件不同它是在按下时就触发了，而box3是按下后再松开才会触发。所以他们不是在同一事件内

 

2、阻止默认事件:默认事件——表单提交，a标签跳转，右键菜单等等

return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的

event.preventDefault(); W3C标准，IE9以下不兼容；可以阻止默认事件

event.returnValue=false;兼容IE

 

 

易错点：阻止冒泡 设计监听器在捕获阶段运行等等 都是指的同一个事件

                console.log(el.target)//事件目标对象

                console.log(el.srcElement)//事件的目标对象

                console.log(documetn.documentElement)//html元素

                console.log(document.dody)//body元素

                console.log(document)//根节点