开发者社区> 主机笔记> 正文

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
简单解析js的事件冒泡及如何取消事件冒泡
简单解析js的事件冒泡 1.什么是事件冒泡? 以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时,点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下: 在这里插入图片描述 HTML代码: <div class="box1"> <div clas
81 0
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
46 0
#yyds干货盘点# 【js学习笔记三十七】事件冒泡
#yyds干货盘点# 【js学习笔记三十七】事件冒泡
50 0
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
92 0
js、react、vue阻止事件冒泡
vue阻止冒泡:     react阻止冒泡:(懒得写了,直接上其他人的) https://zhuanlan.zhihu.
1968 0
+关注
主机笔记
主机笔记,各种服务器教程,vps教程,尽在https://www.zhujibiji.com/
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多