【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日
最近在学习js时，遇到了三个名词：事件捕获、事件冒泡、事件委托。
一、事件捕获和事件冒泡
事件捕获和事件冒泡是为了解决网页中的事件流（事件发生的顺序）而提出的概念。
事件捕获是指事件会从开始发生，直到最具体的元素。
而事件冒泡正好相反，就如同将石子投入水中，波纹是从中心向两边散开。事件冒泡是指事件会从最内层的元素开始发生，一直向外传播。
例：
<div id="outer">
<p id="inner">Click me!</p>
</div>
对同一个click事件，采取事件捕获的方式，则click事件发生的顺序是document -> html -> body -> div -> p；而采用事件冒泡的方式，click事件发生的顺序则是p -> div -> body -> html -> document。
如果div元素和p元素各有一个函数处理click事件，那么采用事件捕获的方式，会先执行div元素的函数，再执行p元素的函数；事件冒泡则正好相反。
事件冒泡案例：
<!DOCTYPE html>
<html lang="en" dir="ltr"> <head>
<meta charset="utf-8">
<title></title>
</head> <body>
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
<!-- 冒泡的方法，点击s2，s2先响应click事件，其次是s1 -->
s1.addEventListener("click", function(e) {
console.log("s1 冒泡事件");
}, false);
s2.addEventListener("click", function(e) {
console.log("s2 冒泡事件");
}, false);
</script>
</body> </html>
事件捕获案例：
<!DOCTYPE html>
<html lang="en" dir="ltr"> <head>
<meta charset="utf-8">
<title></title>
</head> <body>
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
<!-- 捕捉的方法，点击s2，s1先响应click事件，其次是s2 -->
s1.addEventListener("click", function(e) {
console.log("s1 捕获事件");
}, true);
s2.addEventListener("click", function(e) {
console.log("s2 捕获事件");
}, true);
</script> </html>
二、事件委托
事件委托是指将事件绑定在父元素上，然后采用事件冒泡的方法，当事件流达到父元素时，可以通过target获取真正触发的当前元素，并执行绑定在父元素上的方法。
这样做可以省去一个个给子元素绑定事件。
一般的步骤是：
①确定需要监听时间的父元素，我现在一般需要画出DOM树
②给父元素添加addEventListener('event', function)
③通过父元素.target获取实际被操作的元素，在函数中进行处理
通俗点说，就是先找到一个比较高的公共元素节点，给它绑定事件，然后通过event.target知道是哪个子节点触发了事件，找到了触发节点，就可以对它进行操作（删除它，删除它的父节点等）
【JavaScript】事件捕获、事件冒泡与事件委托的更多相关文章
- DOM事件： DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件
前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- JavaScript 事件(捕获和冒泡 兼容性写法)
事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- dom事件不求甚解，色解事件捕获和冒泡
以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- Spirit带你彻底了解事件捕获和冒泡机制
Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要 ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- js：捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
随机推荐
- 读取InputStream 中的内容
读取InputStream 中的内容 ]) { , len); //把读取到的内容写到输出流中 } //<4> 把字节数组转换为字符串 String content = baos.to ...
- Java-正则使用
Java-正则使用 注意 在Java中由于string的设计,导致斜杠是特殊的字符,所以如若想要在正则中使用斜杠,则需要两个斜杠来表示 eg: \d 需要写成: \\d ,两外 \\\\ 表示匹配单个 ...
- day13_H5_CSS_2
一.css样式引用优先级,最高的是标签中写的样式,一标签为基准,有内而外,有下到上依次应用 2.样式隐藏,插入小知识,宽度可以写百分比(如:100%就是宽度两边占满) 3.加大加粗 4.水平垂直居中 ...
- .NET 文件格式相关开源项目
在过去的2年里,我已确定把文件格式作为我的主要研究课题之一,NPOI就是在这样的研究课题下的产物.尽管从严格意义上讲NPOI只是POI的.NET版本,并不是我创造的,但是在开发过程中,我对OLE2有了 ...
- ECMA Script 6_异步编程之 Promise
Promise 对象 异步编程 方案,已同步的方式表达异步的代码,解决回调地狱的问题 比传统的解决方案——回调函数和事件——更合理和更强大 是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步 ...
- [LeetCode] Search in a Sorted Array of Unknown Size 在未知大小的有序数组中搜索
Given an integer array sorted in ascending order, write a function to search target in nums. If tar ...
- [LeetCode] Random Flip Matrix 随机翻转矩阵
You are given the number of rows n_rows and number of columns n_cols of a 2D binary matrix where all ...
- linux学习：xargs与grep用法整理
xargs xargs 是给命令传递参数的一个过滤器,也是组合多个命令的一个工具. xargs 可以将管道或标准输入(stdin)数据转换成命令行参数,也能够从文件的输出中读取数据. xargs 也可 ...
- DAG---矩阵嵌套问题
矩形嵌套时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c, ...
- 在U8菜单中增加自定义项
--.NET实现的脚本 If Exists (Select 1 From UFSystem..UA_Menu where cMenu_id = 'SAM06') delete from UFSyste ...