很多人都听说过,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. guava学习--AsyncFunction

    AsyncFuntion接口与之前学习吃的使用Function和Functions进行对象转换有很密切的联系,AsyncFuction接口是Function接口的异步表现,AsyncFuction和F ...

  2. PDF 补丁丁 0.5.0.2713 发布(替换字库功能修正字符宽度问题)

    新版本替换字库后,采用新字库的字符宽度.基本上可以满足一般的字库替换需求.请下载新版本测试.

  3. 【PCB】【项目记录】AWG任意波形产生器

    ———————————————————————————————————————————————————————————————————— 原理图V1.0 01.top 已完成原理图绘制,但有相当错误, ...

  4. Java parseInt()方法

    1.Java parseInt()方法 使用此方法得到的原始数据类型的一个特定的字符串. parseXxx()是一个静态方法,可以有一个参数或两个. java parseInt() 语法:   sta ...

  5. TF400324: Team Foundation services are not available from server…

    Quick Fix As a quick fix you can Close Visual Studio and related apps Browse to %LocalAppData%\Micro ...

  6. ajax属性 data--------------20160705

    $.ajax({ type : "get", //这里get和post都可以 url : "cccccc.ccc", data: "name = xx ...

  7. 阿里云服务器被挖矿minerd入侵的解决办法

    上周末,更新易云盘的时候,发现阿里云服务器CPU很高,执行 top 一看,有个进程minerd尽然占用了90%多的CPU, 赶紧百度一下,查到几篇文章都有人遇到同样问题 Hu_Wen遇到的和我最相似, ...

  8. Spark机器学习读书笔记-CH03

    3.1.获取数据: wget http://files.grouplens.org/datasets/movielens/ml-100k.zip 3.2.探索与可视化数据: In [3]: user_ ...

  9. 取得交换机的MAC地址

    一.首先PING交换机的IP地址 二.然后执行 ARP -a 命令 如下图:

  10. 前端开发week2

    从网页布局看思维方式以及思维方式对于前端制作的重要性 经过了两个星期的学习,对于静态网页的制作也已经有了比较完整的理论知识和实践基础,技术层面的东西固然还是很重要.是最基础的,但是在实际制作网页的过程 ...