javascript中的事件冒泡和事件捕获

Posted 2020-08-06 TXXT

焦点事件
onfocus:得到焦点
onblur:失去焦点

事件冒泡(和样式无关，结构)
当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级,一直到顶层window

阻止冒泡:
当前要阻止冒泡的事件函数中调用
event.cancelBubble=true; //阻止当前事件的当前对象

事件捕获:

 

绑定事件:
1.obj.onclick=function(){} //一个对象同一个事件绑定2个函数会产生覆盖
2.ie:obj.attachEvent(‘onclick‘,fn1)
标准:obj.addEventListener(‘click‘,fn1,捕获)
默认是不捕获，冒泡

问题:
ie下attachEvent中的this指向window
call方法 fn1()==fn1.call() call第一个参数可以改变this指向
绑定事件的封装:
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false)
}else{
obj.attachEvent(‘on‘+evname,function(){
fn.call(obj)
})
}
}

出去冒泡，进来捕获
事件捕获:
obj.addEventListener(‘click‘,fn,true)

事件取消:
1.obj.onclick=null; //赋值取消
2.ie:obj.dettachEvent(obj,fn)
标准:obj.removeEventListener(obj,fn,捕获)