很多人都听说过,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. C++ 在容器中存放函数指针

    注意,对一般c++ 98标准编译器而言,容器泛型模板是不支持直接存放函数指针的.需要typedef将函数指针重命名. 比如,一个void返回值参数也为void的函数指针,需要 typedef void ...

  2. Scala练习(二)

    3.计算指定目录下以".txt"为扩展名的文件个数.注:随便建个目录,建几个.txt文件即可. 4.计算"input_4.txt"文件中搜索词的出现次数,并按次 ...

  3. Node.js EventEmitter(事件队列)

    Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.read ...

  4. 框架 Onboard-引导页样式制作库

    设置背景图片或者背景movie,然后在它们之上生成数个ViewController,默认是顶部一张图片,下面是标题和详细介绍,最下面是按钮和pagegithub地址  https://github.c ...

  5. 14073102(CCDIKRecoil)

    [目标] CCDIKRecoil [思路] 1 CCDIK和Recoil的结合 2 Recoil的回弹机制,逐渐回到原来位置 3 添加一个Recoil基类 [步骤] 1 将\Src\GameFrame ...

  6. 复利计算软件v3

    #include <windows.h> #include<stdio.h> #include<math.h> void count(){ int a,b; dou ...

  7. nRF24L01芯片控制——迈向无线的第一步

    nRF24L01芯片是一款专供单片机的射频收发芯片.工作于2.4GHz~2.5GHz ISM频段.融合了shockburst技术. 我先列出该芯片的硬件参数资料: 至于每个引脚的具体用途,可以参见技术 ...

  8. HttpServletRequest常用的方法

    假设客户端请求的地址:http://localhost:8082/TestReq/MyServlet/?username=李雷&age=20 request.getRequestURL htt ...

  9. php截取utf-8中文字符串乱码的解决方法

    /** * PHP截取UTF-8字符串,解决半字符问题. * 英文.数字(半角)为1字节(8位),中文(全角)为2字节 * @return 取出的字符串, 当$len小于等于0时, 会返回整个字符串 ...

  10. 使用rem缩放网页的javascript代码

    <script type="text/javascript"> (function(doc, win) { var docEl = doc.documentElemen ...