很多人都听说过,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. Application.Run()和Form.Show()以及Form.ShowDialog()

    ShowDialog()弹出模式化的窗体 Show()弹出非模式化的窗体 模式窗体,在关闭或隐藏前无法切换到主窗体. 非模式窗体,变换焦点使不必关闭窗体 总结:显示重要的信息,还是用模式窗体,如删除文 ...

  2. php fastcgi_finish_request让你的程序由等待时间,瞬间完成,提高用户体验

    当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...

  3. Topcoder SRM558 1000 SurroundingGame

    题意:给定一个网格,每个网格有选取代价和占据收益.每个点被占据,需要满足以下两个条件至少一个条件:1.被选取  2.邻近方格都被选取(有公共边被称为邻近)  不一定要占据所有方格,求最大收益. 第一直 ...

  4. 【转载】桥接Microsoft Word和浏览器

    原文链接地址: http://www.infoq.com/cn/articles/convert-microsoft-word-to-html?utm_campaign=rightbar_v2& ...

  5. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  6. Bootstrap<基础十一>字体图标(Glyphicons)

    字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...

  7. C++小项目:directx11图形程序(九):总结

    整篇文章中对于directx11的知识的介绍并不多,我也不知道怎么介绍,也应该说对于directx,它有它自己的部分,比如设备(device),设备上下文(devicecontext),顶点缓存,索引 ...

  8. GridView获取列子段的几种途径

    GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 要获取当前行的某个数据列,我在实践中总结有如下几种方法: 1. Ce ...

  9. 前端开发week3

    开发工具学习ing... lesscss 框架 lesscss是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便 ...

  10. 用PowerMock mock 临时变量

    在开发时,经常遇到这种情况,被测试方法所调用的类不是通过构造注入的,而是通过临时new出来的,如下面待测方法: public class EmployeeService { private Emplo ...