设想这样一种情况

一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span?

准确的说两个都触发了,这种认可大家都允许,事实就是这种,

第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div?

早期就有两个主流的浏览器厂商各执己见,IE觉得,这个事件首先触发span,然后依次往父节点传递,终于传递到document,(这个过程称为冒泡)

网景浏览器觉得,不论什么事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获)

按正常人的思维更加倾向与冒泡这样的方式,笔者也是这么认为的,

后来的w3c标准认为两种方式各有长处,于是综合了两种方式,因此两种都是标准,

就眼下来看,IE用户有下降的趋势,标准的w3c浏览器用户在不断添加,可是IE用户毕竟不少,

所以大部分站点开发者都不会用捕获,由于IE不支持捕获,而其它w3c标准浏览器既支持捕获又支持冒泡,

所以非常多人仅仅知道冒泡不知道捕获,就大部分事件处理逻辑来看,冒泡基本已经可以完毕,可是捕获有自己的优势,某些相对复杂的事件处理採用冒泡结合捕获会更佳,

以上是个人对事件冒泡以及捕获的理解,以下利用冒泡来看一下事件托付实现原理(採用捕获相同能够实现,道理一样)

依据事件冒泡机制,不论什么事件都会冒泡到document,事件托付就是把全部事件处理函数绑定到document,依据事件參数推断事件源对象,

推断不同的对象给予不同的处理函数,

举个样例:(jquery方式)

$(document).on("click",function(e){
var _this = e.target; //获取事件源对象
var id = $(_this).attr('id'); //获取对象的id
switch(id)
{
case "btnid" : function(){
//do some thing
} ; break;
case "divid" : function(){
//do some thing
}; break;
default : function(){
//do some thing
};
}
});

事件冒泡与捕获&事件托付的更多相关文章

  1. JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  2. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  3. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  4. JS 事件冒泡、捕获。学习记录

    作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...

  5. JavaScript事件冒泡与捕获

    event.preventDefault();    如果event.cancelable的值为true,可以取消默认事件 event.cancelable;             元素是否可以取消 ...

  6. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  7. DOM事件-冒泡、捕获、传播、委托

    事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...

  8. JS 事件冒泡整理 浏览器的事件流

    JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...

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

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

随机推荐

  1. 华夏部分互联网科技公司创始及IPO信息

    时间:2018-04-19 前面整理了一些美国科技公司的信息,这篇文章整理的是我华夏的一些科技公司的信息. 华为.百度.阿里.腾讯.美团.携程.京东.小米.奇虎360……之后,其它一些公司,要么体量 ...

  2. maven package exec 及 maven 配置文件详解

    maven package test包下执行test 的配置文件 生成target目录,编译.测试代码,生成测试报告,生成jar/war文件 maven 配置文件详解 http://blog.csdn ...

  3. 不同Linux机器之间拷贝文件

    不同的Linux之间copy文件常用有3种方法: 第一种就是ftp,也就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的client程序来进行文件的copy. 第二种方法就是 ...

  4. AdvStringGrid 滚动条问题

    1.默认水平方向 滚动条是 小的 滚动的时候 数据会随着滚动 而 滚动的. 2.默认垂直方向 滚动条是 小的 滚动的时候 数据不会随着滚动 而滚动的.ScrollSynch := True; 垂直方向 ...

  5. Unix IPC之Posix信号量实现生产者消费者

    采用多生产者,多消费者模型. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /**  * 生产者  */ P(nempty); P(mutex); // 写入一个 ...

  6. Maven3核心技术(笔记三)

    第一节:Maven仓库概念 Maven 远程仓库配置文件:$M2_HOME/lib/maven-model-builder-3.3.3.jar 文件:org\apache\maven\model\po ...

  7. SQL 标量函数-----日期函数 day() 、month()、year()

    select day(createtime) from life_unite_product --取时间字段的天值 select month(createtime) from life_unite_p ...

  8. MFC+WinPcap编写一个嗅探器之一(准备)

    知识准备: MFC:http://www.jizhuomi.com/software/257.html WinPcap:http://www.ferrisxu.com/WinPcap/html/ind ...

  9. 20169211《Linux内核原理与分析》第六周作业

    1.教材内容总结 2.实验报告 3.学习总结 一.教材内容总结 1.系统调用与应用编程接口API的区别 操作系统为用户态进程与硬件设备进行交互提供了一组接口,就是系统调用.它主要有一下三个方面的作用: ...

  10. ZOJ 4010 Neighboring Characters(ZOJ Monthly, March 2018 Problem G,字符串匹配)

    题目链接  ZOJ Monthly, March 2018 Problem G 题意  给定一个字符串.现在求一个下标范围$[0, n - 1]$的$01$序列$f$.$f[x] = 1$表示存在一种 ...