事件冒泡与捕获&事件托付
设想这样一种情况
一个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
};
}
});
事件冒泡与捕获&事件托付的更多相关文章
- JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js事件机制——事件冒泡和捕获
概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- DOM事件-冒泡、捕获、传播、委托
事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
随机推荐
- IntelliJ IDEA + Tomcat ;On Upate Action 与 On Frame Deactivation
On Upate Action 与 On Frame Deactivation 这两个选项的设置,依赖于 项目的部署方式 是war包 还是 exploded ,看下面的gif: 这里实在是太灵活了, ...
- Luogu P1566 【加等式】
看到这道题,我们首先注意到“找出其所有的加等式的个数”,自然地考虑运用计数DP求出若干数相加的和的个数 考虑将每个元素排序后DP处理若干数相加的和的个数 用f[i]表示 对于一个数a[i],对于前i- ...
- 【LOJ】#2123. 「HEOI2015」最短不公共子串
题解 我们对于B串建出后缀自动机和序列自动机 对于问题1,枚举左端点然后跑后缀自动机,直到不能匹配作为这个左端点的答案 对于问题2,枚举左端点然后跑序列自动机,直到不能匹配 对于问题3,设f[i][j ...
- windows7无声音,提示未插入扬声器或耳机的解决
windows7无声音,提示未插入扬声器或耳机的解决: http://jingyan.baidu.com/article/358570f6043a85ce4624fc47.html
- Dubbo中只订阅与只注册
一:只订阅 1.场景 为方便开发测试,经常会在线下共用一个所有服务可用的注册中心,这时,如果一个正在开发中的服务提供者注册,可能会影响消费者不能正常运行. 可以让服务提供者开发方,只订阅服务(开发的服 ...
- Ubuntu18.04 n卡配置
一.背景 最近安装了ubutnu18.04后,安装系统后重启卡住,强制关机重启后,又在开机界面紫屏卡住,上网搜索后发现是n卡的驱动问题,使用以下方法安装驱动后成功解决该问题. 二.解决方法 1.进入恢 ...
- Vue.js中 watch 的高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...
- 链路跟踪技术traceId的总结和实践
目录 写作背景 什么是链路跟踪 目前常见的链路跟踪技术及其优缺点 链路跟踪技术的实现原理 代码示例 背景 由于最近系统上线后,访问量达,出现线上问题后往往无从下手排查,即使打印了很多日志,依然无法快速 ...
- 机器学习:KNN-近邻算法
一.理论知识 1.K近邻(k-Nearest Neighbor,简称KNN)学习是一种常用的监督学习. 工作机制:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本,然后基于这k个的信 ...
- Little Elephant and Array 线段树
题目:http://codeforces.com/problemset/problem/220/B 题意 给定一组数据,多次询问区间内某数字出现次数与该数字数值相同的数的个数 思路 一看到区间查询,就 ...