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. (三)ajax请求不同源之websocket跨域

    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀.该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信. 一.WebSocket目标 在一个单独的 ...

  2. docker+ubuntu14.04+cuda7.0

    参考链接: http://tleyden.github.io/blog/2014/10/25/docker-on-aws-gpu-ubuntu-14-dot-04-slash-cuda-6-dot-5 ...

  3. Tarjan求割点(割顶) 割边(桥)

    割点的定义: 感性理解,所谓割点就是在无向连通图中去掉这个点和所有和这个点有关的边之后,原先连通的块就会相互分离变成至少两个分离的连通块的点. 举个例子: 图中的4号点就是割点,因为去掉4号点和有关边 ...

  4. centos官网下载地址

    CentOS 7官方下载地址:https://www.centos.org/download/ 源自博友的博客:https://blog.csdn.net/yf9595/article/details ...

  5. struggle in the ACM（一）

    struggle in the ACM(一) 2018/11/3 成为一名ACMer以后,第一次参加ACM正式比赛,果然是打铁了~ 回想起整场比赛的前前后后,其实拿到现在这个成绩,真的是情理之中却也是 ...

  6. AngularJS_简介、特性及基本使用_及其工作原理

    转自:angularJS 的工作原理 转自:通过<script>标签引入到 HTML 中,那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析 当浏览器解析到这个节点时, ...

  7. 加密传输：每位数字+6，然后用除以9的余数代替该数字， 在把第一位和第四位交换，第二位和第三位交换，例如3276->3840

    /** * @author:(LiberHome) * @date:Created in 2019/3/6 10:00 * @description: * @version:$ */ /*今日目标:5 ...

  8. 螺旋矩阵 java实现（待消化）

    import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/4 17:13 * @description ...

  9. CentOS系统下安装python3+Django

    转载:CentOS系统下安装python3+Django 1.首先用yum安装下vim,因为CentOS 7可能根本没自带完整vim,经常出现输入乱码:yum -y install vim 2.安装开 ...

  10. 1. Scala概述

    1.1 概述 联邦理工学院洛桑(EPFL)的Martin Odersky于2001年开始设计Scala Scala是Scalable Language的简写,是一门多范式的编程语言 1.2 Scala ...