说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这就叫做"事件冒泡"。然而,事情要是这么简单的话,相信笔者这时一定已经迎娶了白富美,当上了CEO。坏就坏在后来又听说一个"事件传播" ,尼玛不是"事件冒泡"吗,然后又听说了"W3C事件模型"。。。到了最后笔者彻底心碎了,只能乖乖的当忙农了!!!

咱们先说说里面的术语,"事件捕获"、"事件冒泡"、"事件传播"、"事件注册"、"W3C事件模型"

"事件注册":事件注册有好多方式,大概有下面这些

1、直接在dom元素上加,这其实是很挫的方式,然并卵,现在仍然有好多淫在用

<input type="button" onclick="alert('打的好')" name="button" value="痛击我啊">

2、使用js程序在dom元素对象上加"onxxx"的形式

<input type="button" id="btn"  name="button" value="痛击我啊">

document.getElementById('btn').onclick = function(){alert('打的好');};

3、使用诸如'addEventListener'、'attachEvent'函数

var dom = document.getElementById('btn');
var hander = function(){alert('打的好');};
if(dom.addEventListener){
dom.addEventListener('click', hander, false);//支持标准w3c浏览器专用
}else{
dom.attachEvent('onclick', hander);//非标准w3c浏览器专用
}

4、逼格更加高点的"事件委托",意思就是委托别人帮助自己响应事件,如下

<div id="father" style="background: green;">
我是父亲啊</br>
呵呵啊</br>
<div id="son" style="background: blue;">
我是儿子啊
</div>
</div>
document.getElementById('father').onclick = function(event){
event = event || window.event;
var target = event.srcElement || event.target;
if(target.getAttribute('id') === 'son'){ alert('你点击了儿子!');}
}

点击"我是儿子啊"弹出框框,点击"我是父亲啊" 什么都没有弹,当然了,你不仅可以委托父级元素,也可以委托和你无关的元素

"事件冒泡" 和 "事件传播":

两个一起说了,是有历史原因的,早期有两冤家,网景和微软,它俩啥都对着干,网景搞"事件传播",微软对着干搞"事件冒泡",这俩货有啥区别了,网上有人专门画了一张图

"事件冒泡"就是那个绿色的箭头,"事件传播"就是那个红色的箭头

"事件冒泡"就从目标元素"td"一直冒到根"window", "事件传播"就从根"window"一直传到"td"元素, 是不是编程都反着干,真是冤家

这时候联合国"w3c"来了, 这不行啊,不能由着他们乱搞啊,不然这天下不就乱了,但是这两家伙实力比较强,又不能不考虑他们啊,于是W3C采用中和方案制定标准,规定"任何事件首先向下传播直到遇到目标元素,然后再向上冒泡返回" ,这注意好这问题统一了,并且都照顾了大家,我这秘书长位置稳保!!!

所以,你上面看到了两个函数"attachEvent" 和 "addEventListener", 其中"attachEvent"是IE8及其之前的IE浏览器专用,只支持"事件冒泡","addEventListener" 是所有支持

W3C标准事件模型的浏览器专用,即支持"事件冒泡" 又支持 "事件传播"。那对应的取消事件绑定就是 "detachEvent"和"removeEventListener" 两个函数了。那上面那个"event = event || window.event" 也是兼容浏览器用的了,因为IE8及其之前的IE浏览器不能直接获取event对象,需要从window对象获取。

那这个"事件传播"与"事件冒泡" 有啥实际上的区别了,我们还是以一段代码来证明(由于IE8及之前的浏览器只支持"事件冒泡",因此我们这里用chrome浏览器测试)

先HTML代码

<div id="father" style="background: green;">
我是父亲啊</br>
呵呵啊</br>
<div id="son" style="background: blue;">
我是儿子啊
</div>
</div>

界面是

document.getElementById('father').addEventListener('click', function(){
alert('我是父亲!');
}, true);//在事件传播阶段捕获
document.getElementById('son').addEventListener('click', function(event){
alert('我是儿子!');
}, true);//在事件传播阶段捕获

点击"我是儿子啊" 是不是会弹出两次,然后我们换成下面这段再看会弹出几次

document.getElementById('father').addEventListener('click', function(){
alert('我是父亲!');
event.stopPropagation();
}, true);
document.getElementById('son').addEventListener('click', function(event){
alert('我是儿子!');
}, true);

这次只弹出了一次"我是父亲" , "我是儿子" 那句没有执行,这是啥原因了?

因为这里设定在事件传播阶段捕获事件,事件是先传播到'father'元素中的,在'father'元素中调用了'event.stopPropagation()'阻止事件进一步捕获,因此事件将不再传播到'son'元素中 (注意,好多淫把阻止事件传播或者冒泡 与 阻止默认事件 弄混淆了, 阻止默认事件的函数为 'preventDefault' 和 'returnValue = false;', 一个W3C标准浏览器专用,一个IE8及之前版本的IE专用)

再来看在事件冒泡阶段进行捕获,会是怎样的结果,代码如下

document.getElementById('father').addEventListener('click', function(){
alert('我是父亲!');
}, false);
document.getElementById('son').addEventListener('click', function(event){
alert('我是儿子!');
event.stopPropagation();
}, false);

这次再点击"我是儿子啊" 只弹出了"我是儿子","我是父亲" 没有弹出,这是啥原因了?

因为上面代码设定了在事件冒泡阶段捕获,事件先进入传播阶段 传播到'fanther', 'son'  然后到达目标元素 'son', 然后按照W3C的规定 以 事件冒泡 方式返回,先是到达'son', 但是在'son'这里被阻止了,因此不再往上冒泡,只能捕获'son'中的事件了

"事件捕获":看了上面那么多,鄙人觉得这个就不用解释了吧

"W3C事件模型":这个,笔者貌似在上面也解释了,不用说了吧

鄙人才疏学浅,有不足之处,欢迎补足!!!

javascript 事件传播与事件冒泡,W3C事件模型的更多相关文章

  1. AngularJs 阻止事件运行,防止冒泡穿透事件

    ng-click 低啊用方法后 添加语句$event.stopPropagation(); <button type="button" ng-click="doSo ...

  2. Javascript事件传播

    MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为" ...

  3. JavaScript:事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

  4. js之事件冒泡和事件捕获及其阻止详细介绍

    虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分 ...

  5. js事件(事件冒泡与事件捕获)

    事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id='aa' click='po'> <p id='bb' cli ...

  6. JS中的事件传播流程

    JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

  7. JavaScript中的事件冒泡?事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  8. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  9. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

随机推荐

  1. keepalived+LVS搭建高可用负载均衡系统

    相关架构设置: 1)vip : 192.168.137.6 2)DS master ip : 192.168.137.8 3)DS backup ip : 192.168.137.9 4)RS 1 i ...

  2. 算法(二)之遗传算法(SGA)

    算法(二)之遗传算法(SGA) 遗传算法(Genetic Algorithm)又叫基因进化算法或进化算法,是模拟达尔文的遗传选择和自然淘汰的生物进化过程的计算模型,属于启发式搜索算法一种. 下面通过下 ...

  3. HADOOP namenode HA

    参考的文章:http://www.cnblogs.com/smartloli/p/4298430.html 当然,在操作的过程中,发现与上述文章中描述的还是有一些小小的区别. 配置好后,start-d ...

  4. [转]PDF预览插件PDFObject.js

    本文转自:http://pdfobject.com/index.php When possible, use standardized HTML markup and avoid JavaScript ...

  5. zookeeper适用场景:分布式锁实现

    问题导读:1.zookeeper如何实现分布式锁?2.什么是羊群效应?3.zookeeper如何释放锁? 在zookeeper应用场景有关于分布式集群配置文件同步问题的描述,设想一下如果有100台机器 ...

  6. NOIP2009普及组细胞分裂(数论)——yhx

    题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家.现在,他正在为一个细胞实 验做准备工作:培养细胞样本. Hanks 博士手里现在有 N 种细胞,编号从 1~N,一个 ...

  7. jemter的使用(二)

    在上篇文章中介绍了如何在jmeter中添加请求,并执行查看结果,下面介绍一下,在运行时需要用到的一些管理器 一.HTTP信息头管理器 1.添加信息头管理器 2.添加变量和值,如:Content-Typ ...

  8. 怎样在python中获取时间?

    from time import strftime date = strftime('%y%m%d') hour = strftime('%H%M%S')

  9. android studio没有org.apache.http.client.HttpClient;等包问题 解决方案

    以前用Eclipse做Android开发工具一直使用apache的http做网络请求,最近换用了Android studio发现没有办法引用apache的包,下面是我引用的步骤

  10. 第13章 Windows内存体系结构

    13.1 Windows的虚拟地址空间安排 13.1.1虚拟地址空间的分区(即虚拟地址空间布局) 进程的地址空间划分 分区 x86 32位 Windows 3GB用户模式下的x86 32位Window ...