很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程。

  那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里。

  这里就有一个小细节,dom点击后,它所有的父级都会触发事件,每一级绑定的事件都会触发,这样是耗费事件和性能进行处理的,但是,如果我们把事件都绑定到document根节点,这样只需要在最后一级的时候,区别是那个dom触发的就行了,这个也叫事件委托。

  其实这个场景适用于,子节点和众多父节点都有事件的绑定的情况,这样就不会触发多个事件,达到你想要的效果。

浅谈js的事件冒泡机制的更多相关文章

  1. 浅谈js的事件冒泡和事件捕获

    本文地址:https://www.cnblogs.com/christineqing/p/7607113.html 前言:    这篇文章起源于上次工作上的原因,在事件上出的bug,所以就抽空写出一篇 ...

  2. js的事件冒泡机制

    js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄

  3. 浅谈javascript中事件冒泡与事件捕获

    事件冒泡:一个事件会顺着他的层级一直往上传,一直传到document上为止,即从盒模型上看是从内到外的过程. 例: <!DOCTYPE html><html lang="e ...

  4. 浅谈Android View事件分发机制

    引言 前面的文章介绍了View的基础知识和View的滑动,今天我们来介绍View的另一个核心知识,View的事件分发机制. 点击事件的传递规则 所谓的点击事件的分发机制,其实就是对MotionEven ...

  5. javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获,看到这篇文章加深了理解)

    原文地址:http://javascript.info/tutorial/bubbling-and-capturing 先给出最终的结论: Summary Events first are captu ...

  6. 浅谈JS事件冒泡

    今天要跟大家谈的是事件冒泡,这个事件呢,也是两面性的,有时候给我们带来bug,有时候优点也很明显.我们就一起来看看它的真面目.  首先看看事件冒泡是什么? 事件冒泡 :当一个元素接收到事件的时候 会把 ...

  7. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  8. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  9. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

随机推荐

  1. 前端常用的几个js判断(二)

    10.鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 ...

  2. biweb后台添加上传下载功能

    1.数据库对应表添加字段 file       varchar(100) 2.对应的后台 模块名/admin/addinfo.php里添加如下代码: //文件上传 if ((($_FILES[&quo ...

  3. Web自动化基础(一)使用Selenium定位元素

    什么是元素?我们知道网页上有什么内容显示出来,比如一个按钮,一个输入框,一张图片,都可以理解成元素,这些元素是由html代码构成的,比如图片可以用<img>标签来展示,一个输入框可以用&l ...

  4. storyboard中的三种传值

    三种传值:属性传值 block传值 以及 代理传值 (这里我用前面的页面和后面的)来表示两个控制器:LoginViewController和RegisterViewController 建立两个控制器 ...

  5. spring beans

    所 有 使 用 XML 文 件 进 行 配 置 信 息 加 载 的 Spring IoC 容 器 , 包 括 BeanFactory 和ApplicationContext的所有XML相应实现,都使用 ...

  6. CSS3让一段文字多余的用省略号表示,当鼠标移动上去的时候显示全部文字

    <style type="text/css"> div { width:100px; overflow:hidden; white-space:nowrap; text ...

  7. linux php redis 扩展安装

    安装redis服务端 1 进入软件的下载路径 cd /soft wget http://download.redis.io/redis-stable.tar.gz tar -zxvf redis-st ...

  8. WINDOWS下如何安装GCC(转载http://nirvana.cublog.cn;作者:北斗星君(黄庠魁))

    第一章 在视窗操作系统下的GCC 第一节 GCC家族概览 GCC 是一个原本用于 Unix-like 系统下编程的编译器.不过,现在 GCC 也有了许多 Win32 下的移植版本.所以,也许对于许多 ...

  9. 对象列表转换为DataTable或DataTable转换为对象列表.

    /**********************************************************************************/ // 说明: 数据转换工具. ...

  10. 利用yii2 gridview实现批量删除案例[转]

    今天仍然继续探讨GridView的问题,昨天有个小伙伴留言说你用gridview给我去掉表头的链接?我想啊想,这用gridview确实不容易实现,至少我没想出来,会的下方可留言.但是呢,这根gridv ...