js中事件冒泡，事件捕获详解
一、事件流
事件是js与HTML交互的基础，事件流描述的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
如果单纯的事件处理，事件捕获和事件冒泡二选一即可，导致两者并存的原因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。
1、事件冒泡
事件开始由最深层的元素接收，然后逐级向上传播
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
let div = document.getElementById('div');
div.onclick = function () {
console.log('div');
};
document.body.onclick = function () {
console.log('body')
};
</script>
</body>
</html>
当点击div标签的时候，先打印出div，然后再打印出body。因为div先接收到点击事件，然后再向它的父元素body传播，再到html，最后到document。
IE，chrome，Firefox，Opera，Safari五大浏览器都支持事件冒泡。
2、事件捕获
事件开始由最外层的document捕获，然后依次向内传播，直至最深层的元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
let div = document.getElementById('div');
div.addEventListener('click', function () {
console.log('div');
}, true);
document.body.addEventListener('click', function () {
console.log('body')
}, true);
</script>
</body>
</html>
当点击div标签的时候，最先打印body，然后再打印出div。因为addEventListener函数的第三个参数为true时，函数处理捕获事件，document先捕获点击事件，依次传播到html—body—div。
IE9，chrome，Firefox，Opera，Safari五大浏览器都支持事件捕获，IE8及以下版本不支持事件捕获。
js中事件冒泡，事件捕获详解的更多相关文章
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- Node.js中环境变量process.env详解
Node.js中环境变量process.env详解process | Node.js API 文档http://nodejs.cn/api/process.html官方解释:process 对象是一个 ...
- js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...
- js中 javascript:void(0) 用法详解
点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...
- 现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await
JavaScript经常声称是_异步_.那是什么意思?它如何影响发展?近年来这种方法有何变化? 请思考以下代码: result1 = doSomething1(); result2 = doSomet ...
- js中caller和callee属性详解
一.caller属性返回一个对函数的引用,该函数调用了当前函数.functionName.callerfunctionName 对象是所执行函数的名称.说明对于函数来说,caller 属性只有在函数执 ...
- Javascript（JS)中的大括号{}和中括号[]详解
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...
- js事件冒泡和事件捕获详解
Javascript与HTML之间的交互是通过事件实现. 一.事件流 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,O ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
随机推荐
- go语言调度器源代码情景分析之二：CPU寄存器
本文是<go调度器源代码情景分析>系列 第一章 预备知识的第1小节. 寄存器是CPU内部的存储单元,用于存放从内存读取而来的数据(包括指令)和CPU运算的中间结果,之所以要使用寄存器来临时 ...
- 『这是一篇干货blog』
更新记录一些很好的干货博客以及工具网站. 各文章,工具网站版权归原作者所有,侵删. Articles 浅谈C++ IO优化--读优输优方法集锦 浅谈斜率优化 思维导图好助手--开心食用Xmind Ty ...
- Python调用ansible API系列（三）带有callback的执行adhoc和playbook
在第二篇文章中虽然可以执行adhoc和playbook但是执行结果的输出并不是特别直观,虽然没有报错但是到底什么结果其实你是不知道的尤其是在执行adhoc的时候,这时候我们要利用callback来设置 ...
- EF Core in Action 中文翻译 第一部分导航
Entityframework Core in action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core ...
- NET微信公众号开发环境搭建（一）-了解微信由来
公众号的应用,开发及调试环境搭建 花生壳要注册 需要二十多块钱 ,还要实名认证,估计要一两天才能审核通过 主要就是在 windows搭建测试环境 1.微信的应用场景 360百科微信简介 ht ...
- 读书笔记：深入理解java虚拟机（一）虚拟机的运行时的数据区域
最近在看深入了解java虚拟机第一版(周志明著),特此写读书笔记,整理其中重要的东西和自己的理解. ”java与c++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却 ...
- 在Salesforce成长：需要好奇心
今天的正题,今天谈谈好奇心和技术.这两天北大学霸Cherry分两次问了我两个问题,都触发了很好的结果和思考,让大家都受益. 第一天是她在做Salesforce和Flexible Report集成项目中 ...
- 解决@ResponseBody注解返回的json中文乱码问题
1. 简介 主要解决@ResponseBody注解返回的json中文乱码问题. 2.解决方案 2.1mvc加上注解(推荐此方法) 在mvc配置文件中假如下面配置(写在 <mvc:annotati ...
- EL表达式 if 和 if else语句的写法
JavaScript的if else大家都不会陌生,但可能很多小伙伴并不知道在jsp文件里,el表达式的if else是怎么写的,下面安利给各位小伙伴 el表达式 if 代码示例 <c:if t ...
- JavaSSM框架报HTTP Status 500 - Servlet.init() for servlet springMvc threw exception错误
如下,刚搭建的项目报这样的错,刚学框架的我一脸懵逼...网上很多说是jdk或者springmvc的的jar的版本问题,但是我其他项目都可以啊,所以排除了这个问题. 经过几个小时的排查,发现了我的问题所 ...