js中的DOM事件之冒泡和捕获事件详解
DOM中的事件是一个很中要的东西,它可以让用户和浏览器之间进行交互,以此来实现人机交互效果
DOM事件
DOM事件分为DOM0级事件和DOM2级事件。DOM0级其实不存在,我们把DOM最初的版本叫0级。在DOM2级的时候更新了一种新的事件绑定的方式,所以才有了所谓DOM0级和DOM2级事件。
- click
- keyup keydown keypress
- scroll
- mouseover
DOM事件在去使用的过程中,语法很简单。
DOM0级事件绑定:
DOM.on事件名 = function () {}// 该方法绑定时无法同时给同一个元素绑定多个相同的事件
DOM.onclick = function () {}
DOM.onclick = function () {} // 这个会覆盖上面的
DOM2级事件绑定:
DOM.addEventListener("事件名", 事件句柄, isCapture)// 一般这么写
DOM.addEventListener("事件名", function () {}, false)
IE8及以下版本需要使用attachEvent()
了解即可
DOM.attachEvent('on事件类型', function () {})
事件流
最早的时候,浏览器市场被网景公司netscape占据,后来微软推出了IE抢占市场,后来网景就倒闭了。
两个浏览器有不同的思想。netScape浏览器,在事件执行操作上,推崇事件捕获。而IE浏览器推崇事件冒泡
事件流在最早有两种相对的事件流:冒泡事件流和捕获事件流。
冒泡事件流
当我们触发一个元素的事件时,会从这个这个元素沿着DOM树向上冒泡,有相同事件的元素会执行对应元素上的事件,没有则继续冒泡,直到到document结束。图中红色部分。
捕获事件流
当我们触发一个元素的事件时,会从document沿着DOM树向下捕获, 直到找到这个元素位置,途径的元素有对应事件,则执行,和冒泡顺序相反
DOM2级事件有了标准事件流
在标准的事件流中,先捕获,到达事件源元素,再冒泡。具体实在捕获阶段执行事件还是在冒泡阶段执行事件,需要看第三个参数是true还是false
DOM.addEventListener("事件", function () {}, false) // 在冒泡阶段执行事件
DOM.addEventListener("事件", function () {}, true) // 在捕获阶段执行事件
事件流带来的好处和坏处
事件委托(事件代理)
把本该自己执行的事件添加到自己的父元素或者祖先元素上,然后利用事件对象限制执行的条件。
e.target // 具体的事件作用的元素
- 可以给后续添加的元素绑定事件
- 节省内存
祖先元素.on事件类型 = function (e) {if (e.target.xxx === "xxx") {// 执行对应的操作}
}// 当元素代理的事件过多时,可以使用switch
祖先元素.on事件类型 = function (e) {switch(e.target.xxx) {case 值1: breakcase 值2:breakcase 值3:break}
}
阻止冒泡
冒泡在有些时候需要被阻止,当元素本身和内部元素有相同类型的事件执行时,一般需要阻止冒泡
dom.onclick = function (e) {e.stopPropagation()
}
阻止冒泡在IE低版本浏览器中,可以使用
e.cancelBubble = true
js中的DOM事件之冒泡和捕获事件详解相关推荐
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- json对象、字符串-数组和数学对象中的相关方法、BOM对象、JS中的DOM操作
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 json对象 字符串对象的相关方法 获取字符串长度 length 清除两侧的空白 trim [ python的strip ] ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
- JS学习笔记六:js中的DOM操作
1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
- 【JS笔记】JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录 一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
- js 的冒泡和捕获事件
事件冒泡和事件捕获 事件的冒泡和捕获是决定事件的执行顺序,如下有两个 div,同时绑定了 click 事件,哪个div 绑定的事件先执行呢? <div class="outer&quo ...
- html内置时间对象,JavaScript中的常用事件,以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
- 关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解 大海和星辰之间,是我们征途的方向: js是一种描述型的语言,由浏览器动态的解析与执行:严格来讲,js是单线程执行的,也就是说js脚本运 ...
- React中ref的使用方法和使用场景(详解)
摘要 不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在Re ...
最新文章
- “我付了钱,为何要说谢谢?”
- SQL中object_id函数的用法
- VTK:PolyData之ResamplePolyLine
- 2016谷歌官方最新eclipse工程导入studio,以前方式全部废弃。不能再使用。
- android su中的字符串,android – 等到su中的命令完成
- Java中接口的多继承
- java servlet 接收post_java 代码post表单数据到服务器,servlet接收处理
- Mac文件管理技巧:灵活的颜色标记,更好地分类
- 数字藏品APP源码,无加密
- 三级网络技术无纸化模拟软件 (未来)教育
- # [Contrastive Learning] Contrastive Coherence Preserving Loss for Versatile Style Transfer
- 1-2 图片批量裁剪
- latex复杂表格排版
- mt6573芯片资料汇总
- 代码质量检查规则中的 is provided externally to the method and not sanitized b.
- 使用Route报错:A <Route> is only ever to be used as the child of <Routes> element, never rendered directl
- nova与neutron交互
- IDEA乱码问题(jdk18)
- linux为什么不能配置网络打印机,linux配置网络打印机
- Consolas和微软雅黑混合字体
热门文章
- 微信小程序跳转公众号图文内容
- 都2022年你还不会安装系统?看我三分钟完事PE制作并进行Win11系统安装实践
- python 切割图_python切割图片的示例
- 大数据_数据来源类型
- Docker学习之docker重启参数--restart=always的作用
- unix/linux 系统 进程资源限制参数
- ORAN C平面 Section Extension 7
- POJ 1877 Flooded! G++
- 微信公众号语音内容提取下载
- Mysql孤儿文件_PostgreSQL中的孤儿文件(orphaned data files)