事件机制(冒泡和捕获)
事件响应链
1.事件的三个阶段:
先捕获,后目标,再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发
事件经过所有元素都没有被处理,这个事件消失
事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系
2.默认在冒泡的时候执行事件:onclick/attach和 addEventListener传false的时候
3.addEventListener绑定事件,如果把第三个参数设置为true,则在捕捉的时候执行事件
4.focus,blur,change,submit,reset,select等事件不冒泡
box.addEventListener("click",funciton(){
console.log(123)
},true)
//捕获阶段触发
box.addEventListener("click",funciton(){
console.log(123)
},false)
//冒泡阶段触发
addEventListener的第三个参数true是阻止事件传递还是false?
答:都不是,都不会阻止事件传递,因为true是捕获阶段触发,false是在冒泡阶段触发;要阻止事件传递唯一的方式就是阻止事件冒泡:事件对象调用stopPropagation()
阻止冒泡和系统默认事件
1、阻止事件冒泡:
event.stopPropagation();W3C标准 ;只阻止冒泡不能阻止捕获。阻止向父级元素冒泡,不可以阻止默认的跳转系统事件
stopImmediatePropagation()方法,这个不仅会阻止事件向祖元素的冒泡,也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时);支持stopPropagation的浏览器中也可以用;阻止程序传递执行冒泡,阻止不了默认的跳转系统事件
box1.addEventListener("mousedown",function(el){
console.log("box1111111",el);
})
box3.addEventListener("click",function(el){
console.log("box222222",el);
el.stopImmediatePropagation()
})
box3.addEventListener("click",function(el){
console.log("box333333",el);
})
//打印,box111111 box222222
为什么不打印box33333===>因为 el.stopImmediatePropagation()的运行阻止了下面代码的运行
为什么还是打印了box1111呢=====>因为box1的触发事件不同它是在按下时就触发了,而box3是按下后再松开才会触发。所以他们不是在同一事件内
2、阻止默认事件:默认事件——表单提交,a标签跳转,右键菜单等等
return false; 以对象属性的方式注册的事件才生效,用addEventListener/attachEvent这种是不生效的
event.preventDefault(); W3C标准,IE9以下不兼容;可以阻止默认事件
event.returnValue=false;兼容IE
易错点:阻止冒泡 设计监听器在捕获阶段运行等等 都是指的同一个事件
console.log(el.target)//事件目标对象
console.log(el.srcElement)//事件的目标对象
console.log(documetn.documentElement)//html元素
console.log(document.dody)//body元素
console.log(document)//根节点
事件机制(冒泡和捕获)相关推荐
- js中的DOM事件之冒泡和捕获事件详解
DOM中的事件是一个很中要的东西,它可以让用户和浏览器之间进行交互,以此来实现人机交互效果 DOM事件 DOM事件分为DOM0级事件和DOM2级事件.DOM0级其实不存在,我们把DOM最初的版本叫0级 ...
- Attribut方法 、鼠标事件、冒泡及捕获
演示 设置两个按钮,点一下变成不可点,另个变可点 getAttribut() 拿到一个属性 setAttribute() 修改一个属性 removeAttribute() 移除一个属性 hasAttr ...
- vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
- js 的冒泡和捕获事件
事件冒泡和事件捕获 事件的冒泡和捕获是决定事件的执行顺序,如下有两个 div,同时绑定了 click 事件,哪个div 绑定的事件先执行呢? <div class="outer&quo ...
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- 事件模型、事件流(冒泡与捕获)、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
- [JS] 事件冒泡,阻止事件冒泡,事件的三个阶段(捕获,目标,冒泡)
事件冒泡 添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
- 事件冒泡和捕获的执行顺序
w3c规定了,任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段.绑定在被点击元素的事件是按照代码的顺序发生的. 冒泡,它就像鱼儿吐泡泡一样,从下到上. 从祖先元素开 ...
最新文章
- 博客园HTML源码运行特制js(原创自Zjmainstay)
- 兰艳艳:SIGIR十年趋势(附视频)
- Java 8系列之Stream中万能的reduce
- OpenGL Volume Texture体积纹理的实例
- .h file not found
- P2664 树上游戏
- chatbot2 RNN语言模型
- Lifewire文档阅读笔记-如何使用IP地址找对应的MAC地址
- 《 产品设计思维:电商产品设计全攻略》一一2.3 电子商务的存在形态
- XML Web services 发现
- 大数据分析平台具备什么功能特点
- springboot之整合mybatis
- 网络攻击导致企业遭受损200万美元
- Windows开发签名工具(SignTool)下载
- java程序设计从方法学角度描述_(特价书)Java程序设计:从方法学角度描述
- 最详细全国区号汇总(json格式)
- C++中begin()函数的含参数的使用
- 9012 递归求n的阶乘
- Android Startup实现分析
- 14款CSS3炫酷表单input输入框美化效果【附源码】