事件响应链
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)//根节点