javascript中的事件冒泡和事件捕获-优快云博客

本文详细介绍了Web开发中的事件处理机制，包括焦点事件如onfocus和onblur，事件冒泡及如何阻止冒泡，事件捕获的过程，以及如何使用addEventListener和attachEvent绑定事件，并提供了兼容不同浏览器的事件绑定方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

焦点事件
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,捕获)