JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人，任务不多，这一周任务全部消灭，闲暇的一天也别闲着，悄悄的看起了书。今天写一下JS的事件冒泡、捕获。
也是今天看的内容有点多了，有些消化不了，就随手记录一下。纯属自我理解，如果有不对，还请指导提出，小弟一定改正。
好了，话不多说。那么事件冒泡是什么？
举个例子 ul > li > div > p 。 这个时候你点击P，他会一层一层的往上执行，直到最后绑定事件的元素。假如我们绑定事件在ul上，那么点击P，他就会逐级往上走，直到找到绑定事件的ul也会触发事件，那么在上面已经没有元素了，他就停下了。
如果说你还不懂，那么没办法了，因为爱，再给你解释一遍。ps：你家现在有4个人。 爸爸 > 妈妈 > 你。好了，那现在你爸手握大权（事件绑定在奶奶这），这时候你爷爷睡午觉，你长得太丑把他吓醒了，一巴掌呼在在你大脸上。你开心的就哭了，回家告状去了。这个时候你告状的顺序就是 你 > 妈妈 > 爸爸 。 那么你回去看一遍上面的顺序是不是就和事件冒泡一样？
你还不懂那我只能上代码了
<!DOCTYPE html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="">
</head>
<style type="text/css">
#click{
width: 500px;
height: 500px;
background-color: red;
margin: auto; }
#click2{
width: 250px;
height: 250px;
background-color: yellow;
}
</style>
<body>
<div id="click">
<div id="click2" class="son"></div>
</div>
<script type="text/javascript">
document.getElementById("click2").addEventListener("click",function(e){
alert("有事打我爸，别打我，");
},false);
document.getElementById("click").addEventListener("click",function(e){
alert("有什么事打我，别打我儿子");
},false);
</script> </body> </html>
1、如果我点击ID=click2，也就是第二个，那么会发生什么？他会先触发click2的事件，接着往上走，再触发click的事件。
2、当点击ID=click元素时，只触发自身的点击事件，因为他自己冒泡上去没有dom元素设置了click事件的函数..
那么什么是事件捕获呢？
刚才说了，事件冒泡就是从底层往底层走。那么捕获刚好反过来，是从顶层往里面走。
也就是说刚才的 ul > li > div > p 例子。事件冒泡是从P到ul，那么事件捕获就是ul到p。举个例子，加入点击事件触发了，他是从从根元素开始就会往下寻找匹配这个事件的子元素，直到找到他。
如果还不懂那么上两张图吧，一张是事件冒泡的，一张是事件捕获的。自行参考（图由本人灵魂画师所制，不足之处请指点）
图为事件冒泡
图为事件捕获。
JS 事件冒泡、捕获。学习记录的更多相关文章
- js事件冒泡/捕获
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
随机推荐
- 设计模式学习--面向对象的5条设计原则之Liskov替换原则--LSP
一.LSP简介(LSP--Liskov Substitution Principle): 定义:如果对于类型S的每一个对象o1,都有一个类型T的对象o2,使对于任意用类型T定义的程序P,将o2替换为o ...
- sql基础语法大全 转载过来的，出处忘了！
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- JVM GC总结
判断对象存活 引用计数算法 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器就加1,引用失效时,计数器就减1:任何时刻计数器都为0的对象就是不可能再被使用的. 问题:无法解决对象之间的相互循 ...
- Nginx面试
声明:此文章非本人所 原创,是别人分享所得,如有知道原作者是谁可以联系本人,如有转载请加上此段话 1.请解释一下什么是 Nginx? Nginx是一个 web服务器和反向代理服务器,用于 HTTP.H ...
- java8 lambda 表达式
lambada 表达式实质上是一个匿名方法,但该方法并非独立执行,而是用于实现由函数式接口定义的唯一抽象方法 使用 lambda 表达式时,会创建实现了函数式接口的一个匿名类实例 可以将 lambda ...
- WPF流程图制作系列相关基础一
WPF流程图制作相关基础一 需求是要通过wpf开发流程图,这个流程图是用户自行拖动配置. 使用过流程图的话,应该大体能想象出流程图拖动配置的样子.这里主要会涉及到的技术知识点就是 wpf拖动相 ...
- HDU3085(KB2-G 双向bfs)
Nightmare Ⅱ Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 阿里云服务器linux主机如何添加swap分区
为什么要添加Swap分区?swap分区,即交换区,作用为:当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作 ...
- jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- Nginx的文件夹的别名设计&drupal简洁url
参考:nginx 官方drupal 配置 - Drupal | NGINX 环境:ubuntu14,Nginx1.12, MariaDB5.5.56,PHP7.1.7 需求:1.不同的网站,不要用文件 ...