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

简介: 焦点事件onfocus:得到焦点onblur:失去焦点 事件冒泡(和样式无关,结构)当一个元素接收到事件的时候,会把他接收到的所有事件传播给他的父级,一直到顶层window 阻止冒泡:当前要阻止冒泡的事件函数中调用event.

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

 

相关文章
|
1天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
13 2
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
16 0
|
3月前
|
JavaScript
js中的事件冒泡
js中的事件冒泡
18 0
|
3月前
|
JavaScript
js中的事件冒泡和事件捕捉
js中的事件冒泡和事件捕捉
12 0
|
3月前
|
JavaScript 前端开发
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
31 2
|
6月前
|
JavaScript 前端开发
JavaScript学习 -- 事件冒泡与事件委派(委托)
JavaScript学习 -- 事件冒泡与事件委派(委托)
29 0
|
6月前
|
JavaScript 容器
js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获
16 0
|
8月前
|
JavaScript 前端开发
JS的冒泡和如何阻止事件冒泡
JS的冒泡和如何阻止事件冒泡
117 0