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】事件捕获、事件冒泡与事件委托的更多相关文章

  1. DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

    前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...

  2. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  3. JavaScript 事件(捕获和冒泡 兼容性写法)

    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...

  4. 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  5. dom事件不求甚解,色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

  6. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  7. Spirit带你彻底了解事件捕获和冒泡机制

    Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要 ...

  8. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  9. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  10. js:捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

随机推荐

  1. C语言中使用bool

    声明 C语言中是没有bool类型的. 使用方法 参考: https://stackoverflow.com/q/1921539.

  2. struts2的java.lang.NoSuchMethodException错误

    不久前在学习struts时出现这个错误,在网上搜索了半天,发现答案不一.将其总结如下,以方便大家参考. 1. 你有没有试试看 其它的方法能不能用,要是都是这种情况的话,可能是你的Action类没有继承 ...

  3. Django——图书管理系统

    基于Django的图书管理系统 1.主体功能 1.列出图书列表.出版社列表.作者列表 2.点击作者,会列出其出版的图书列表 3.点击出版社,会列出旗下图书列表 4.可以创建.修改.删除 图书.作者.出 ...

  4. django——面试题(已工作,暂停更新)

    谈谈你对HTTP协议的认识. 什么是协议? 协议,是指通信的双方,在通信流程或内容格式上,共同遵守的标准. 什么是http协议? http协议,是互联网中最常见的网络通信标准. http协议的特点 ① ...

  5. ubantu16.04安装ns2.34 错误

    把ns2.34解压缩之后,sudo ./install 出现的错误: 错误一:安装NS2.34过程中出现如下的错误:tools/ranvar.cc: In member function ‘virtu ...

  6. Express内置方法

    创建一个 Express 应用.express()是一个由 express 模块导出的入口(top-level)函数. //最顶级:top-level 内置方法 express.static(root ...

  7. css 控制文字显示两行,多余用省略号 手机端

    p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...

  8. 执行发送邮件Send方法时,报错:邮箱不可用。 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com

    .net代码在执行发送邮件Send方法时,往往出现这个的报错: 邮箱不可用. 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com 这个问题应该是smtp的设置问 ...

  9. springBoot使用@Value标签读取*.properties文件的中文乱码问题

    上次我碰到获取properties文件中的中文出现乱码问题. 查了下资料,原来properties默认的字符编码格式为asci码,所以我们要对字符编码进行转换成UTF-8格式 原先代码:@Proper ...

  10. 遍历其 interator

    当用户自定义数据结构的时候, 如果做遍历呢, 这个时候就需要遍历器 interator 了, 它允许用户定义遍历自己自定义数据结构的方式 当用户定义了iterator, 就可以使用 for of 来遍 ...