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,捕获)

 

相关文章
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
47 2
|
9天前
|
JavaScript 前端开发 UED
JS DOM 事件流与事件冒泡
【10月更文挑战第16天】理解 DOM 事件流和事件冒泡是掌握 JavaScript 事件处理的关键。通过合理利用事件冒泡,可以实现更高效、灵活的事件处理机制,提升用户体验和开发效率。在实际开发中,要根据具体情况灵活运用这些概念,以达到最佳的效果。
|
5月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
42 0
|
27天前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
|
2月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
21 0
|
3月前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
24 1
|
4月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
69 1
|
5月前
|
JavaScript
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
|
6月前
|
JavaScript 前端开发
js的事件冒泡
js的事件冒泡
30 1