博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[JS]事件捕获和冒泡
阅读量:4327 次
发布时间:2019-06-06

本文共 1680 字,大约阅读时间需要 5 分钟。

1.在浏览器大战期间对于事件的处理Netscape和Microsoft是不同的实现方式。

网景采用的是捕获流,微软采用的是冒泡流

在如下代码中

_事件绑定 如果给div和span都绑定了click事件,用户点击span标签的时候div和span标签上的click事件均会触发的.但是触发的顺序在冒泡流和捕获流中的顺序是不一样的;在冒泡流中span上的事件先行触发,然后才是div上的事件触发,但是在捕获流中的触发顺序是先是div上的事件触发,然后才是span上的事件触发. 在DOM中是综合和两种触发事件流,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。 通常程序员可以自行选择采用哪种事件流:   ele.addEventListener('click',doSomething,true);   参数三:true表示的是捕获;false表示的冒泡   但是在部分IE浏览器中不支持addEventListener(),没法通过第三个参数来设置是冒泡还是捕获,但是在不支持addEventListener()方法的浏览器中默认采用的就是冒泡流,且绑定事件的的方法是ele.attachEvent("onclick", doSomething);
_事件阻止 事件的触发过程也是可以阻止的,由于IE和非IE浏览器的事件绑定方法不同那么其阻止事件的方法也会不同的
• 在DOM中,使用stopPropagation()方法 • 在IE下设置cancelBubble = true; 一般为了浏览器的兼容性写法如下 if(e.stopPropagation){
  e.stopPropagation(); }else{
  e.cancelBubble=true; } *在阻止事件事件的时候有两种方法分别是:stopPropagation()和stopImmediatePropagation()两个是有却别的
stopPropagation()方法是作用在后续节点上的,不能阻止当前节点的事件
stopImmediatePropagation()方法是作用的当前节点的,当然后续节点也是有用的
如果的$("span.child")上绑定两个点击事件,在$("div.parent")上绑定事件,如果在span的第一个点击事件后放置stopPropagation()方法,当前节点的第二个点击事件还会继续执行的,但是如果是stopImmediatePropagation()方法那么第一个绑定事件执行完后不会调用第二个绑定事件; 当然不管是绑定的stopPropagation()还是stopImmediatePropagation()后续的div上的事件均不会触发的.
_事件取消
取消事件是取消函数执行后的浏览器默认行为,而不是退出函数.如果希望取消事件的同时又想退出函数就需要取消事件的同时return退出函数 取消事件   在DOM中:e.preventDefault();   IE:e.returnValue = false; _上述说的IE浏览器指的是IE8及以下版本的浏览器,在高级IE浏览器中开始遵守DOM标准了

2.事件分为三个阶段:

依次为 ①捕获阶段,②目标阶段,③冒泡阶段, 第一阶段:事件从文档根元素开始逐层向下传递,直到找到事件目标, 第二阶段:找到事件目标并触发相应的事件,   获取目标:DOM:e.target        IE8:e.SRCElement 第三阶段:从目标逐层向上返回到根节点, 利用事件冒泡优化规则:如果多个同级子元素,都绑定了相同的事件处理函数,就可以仅在父元素上绑定一次即可,如果页面中的绑定事件处理函数越多,执行效率越低,所以要尽量减少处理函数的绑定次数

转载于:https://www.cnblogs.com/zpsylgdx/p/8490654.html

你可能感兴趣的文章
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-4.后端项目分层分包及资源文件处理...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-2.快速搭建SpringBoot项目,采用IDEA...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-7.接口配置文件自动映射到属性和实体类配置...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-5.开源工具的优缺点选择和抽象方法的建议...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-1.整合Mybatis访问数据库和阿里巴巴数据源...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-4.动态Sql语句Mybaties SqlProvider...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-1.单机和分布式应用的登录检验讲解...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-3.登录检验JWT实战之封装通用方法...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-2.使用Mybatis注解开发视频列表增删改查...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-2.微信扫一扫功能开发前期准备...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-3.Vidoe相关接口完善和规范协议...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-3.微信Oauth2.0交互流程讲解...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-5.PageHelper分页插件使用
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-6.微信扫码登录回调本地域名映射工具Ngrock...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-2.微服务下登录检验解决方案 JWT讲解...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-8.用户模块开发之保存微信用户信息...
查看>>
HDU 5353 Average
查看>>
进程和计划管理
查看>>
MQ_ActiveMQ环境部署+C#推送和接收消息
查看>>