Dom基础（三）:事件冒泡，事件委托（事件代理）和事件捕获
javascript中的addEventListener(事件名，回调，布尔)
其中第三个参数默认为false-事件冒泡，true为事件捕获
二者区别：
- 事件冒泡：目标元素事件先触发，然后父元素事件触发
- 事件捕获：父元素事件先触发，然后目标元素事件触发
1 <body id="body">
2 <div id="div1">
3 <a href="#">a1</a>
4 <a href="#">a2</a>
5 <a href="#">a3</a>
6 <a href="#">a4</a>
7 <button id="btn1">点击添加一个a标签</button>
8 </div>
9 </body>
10 <script>
11 //通用绑定事件
12 function bindEvent(elem, type, fn) {
13 elem.addEventListener(type, fn)
14 }
15
16 //事件冒泡
17 const div1 = document.getElementById("div1")
18 bindEvent(div1, 'click', event=>{ //事件冒泡，如果你点击是button或者a 则div1绑定的回调也会触发
19 console.log(event.target)
20 alert('这是冒泡')
21 })
22 const body = document.getElementById("body")
23 bindEvent(body, 'click', event=>{ //事件冒泡，如果你点击是button或者a 则body绑定的回调也会触发
24 console.log(event.target)
25 alert('这是body')
26 })
27 </script>
事件委托是利用事件冒泡原理，把事件监听绑定在元素的父级上。当元素被点击时，父级上绑定的点击事件就会被触发，事件触发函数里通过判断 e.target 上的 data-name 或 class 等标识来执行不同的逻辑。
优点：可以减少浏览器内存占用，提高代码整洁度
<body id="body">
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<button id="btn1">点击添加一个a标签</button>
</div>
</body>
<script>
//通用绑定事件
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
} //事件代理
const div1 = document.getElementById("div1")
bindEvent(div1, 'click', event=>{ //事件冒泡，可以指定父元素委托某个子元素触发父元素绑定的回调
event.preventDefault();
let target = event.target
if(target.nodeName=='A') {
console.log('这是div')
}
})
</script>
阻止事件冒泡和默认事件
event.preventDefault()可以阻止如a链接等默认行为
event.stopPropagation()可以阻止事件继续冒泡
手写一个事件函数
1 //通用绑定事件
2 function bindEvent(elem, type, selector, fn) {
3 //如果fn为null则证明这是普通事件
4 if(fn == null) {
5 fn = selector
6 selector = null
7 }
8 elem.addEventListener(type, event =>{
9 const target = event.target
10 //如果selector存在证明他是事件委托
11 if(selector) {
12 if(target.matches(selector)) {
13 fn.call(target, event)
14 }
15 }else {
16 fn.call(target, event)
17 }
18 })
19 }
Dom基础（三）:事件冒泡，事件委托（事件代理）和事件捕获的更多相关文章
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- vue中click阻止事件冒泡，防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- Asp.Net 利用反射获得委托和事件以及创建委托实例和添加事件处理程序
子程序定义: public delegate void CurrentControlListenEvent(string uniqueID, string way = null); public ev ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
- javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
随机推荐
- [SPDK/NVMe存储技术分析]001 - SPDK/NVMe概述
1. NVMe概述 NVMe是一个针对基于PCIe的固态硬盘的高性能的.可扩展的主机控制器接口. NVMe的显著特征是提供多个队列来处理I/O命令.单个NVMe设备支持多达64K个I/O 队列,每个I ...
- FrameScan CMS漏洞扫描
工具简介 GithubL:https://github.com/qianxiao996/FrameScan FrameScan是一款python3编写的简易的cms漏洞检测框架,支持多种检测方式,支持 ...
- 开源电调blheli / blheli_s分析
一． 启动阶段分析 启动阶段需完成24次换相,超过24次之后进入初始运行阶段,该阶段持续12次换相周期(每个周期6次换相),完成后进入正常运转阶段 二． 换相时间分析 总体思想是根据电机运行状态计算前 ...
- 开源三轴云台EVVGC（simple BGC）分析
一． 主程序分析 主程序结构清晰,流程如图所示,下面将对每个部分做详细分析 二. 系统初始化 系统初始化部分的流程如上图所示,下面对每部分做具体分析 1. 时钟初始化 该部分主要是使能DWT,用DWT ...
- docker-compose + nginx部署前后端分离的项目
安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persiste ...
- Nginx(一) 反向代理为何叫反向代理？
与正向代理比起来,反向代理是什么东西反向了? 正向代理 A同学在大众创业.万众创新的大时代背景下开启他的创业之路,目前他遇到的最大的一个问题就是启动资金,于是他决定去找马云爸爸借钱,可想而知,最后碰一 ...
- spring源码-扩展点
/** * @Author quan * @Date 2020/11/13 * 扩展原理 * BeanPostProcessor bean后置处理器,bean创建对象初始化前后进行拦截工作 * * * ...
- MySQL 里记录货币用什么字段类型?
NUMERIC 和 DECIMAL 类型被 MySQL 实现为同样的类型,这在 SQL92 标准允 许.他们被用于保存值,该值的准确精度是极其重要的值,例如与金钱有关的数 据.当声明一个类是这些类型之 ...
- springboot-访问数据库
在springboot中,默认的JPA实现是Hibernate,JPA是Java Persistence API的简称,中文名Java持久层API <!--数据库--> <depen ...
- 什么是CSS Modules ？我们为什么需要他们
原文地址:https://css-tricks.com/css-mo...最近我对CSS Modules比较好奇.如果你曾经听说过他们,那么这篇博客正适合你.我们将去探索它的目的和主旨.如果你同样很好 ...