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鼠标滚轮控制输入框取值中已使用 ...
随机推荐
- LaTeX 公式编辑
推荐一篇关于LaTeX的文档:<一份不太简短的LATEX 2ε介绍> 1. 常用数学公式符号: 求期望 $\mathbb{E}$ \mathbb{E} 正负无穷 $+\infty$,$-\ ...
- [区块链] 拜占庭将军问题 [BFT]
背景: 拜占庭将军问题很多人可能听过,但不知道具体是什么意思.那么究竟什么是拜占庭将军问题呢? 本文从最通俗的故事讲起,并对该问题进行抽象,并告诉大家拜占庭将军问题为什么在区块链领域作为一个重点研究问 ...
- kube-proxy的功能
Kube-proxy的功能 我们知道POD的IP是动态分配的而且经常会变,所以为了可以通过一个不太容易变化的IP访问POD就会使用一个叫做service的东西,通过标签选择器和POD进行关联. Ser ...
- EFCore动态切换Schema
最近做个分库分表项目,用到schema的切换感觉还是有些坑的,在此分享下. 先简要说下我们的分库分表 分库分表规则 我定的规则是,订单号(数字)除以16,得出的结果为这个订单所在的数据库,然后他的余数 ...
- 学习 JavaScript（二）在 HTML 中使用 JS
基本用法 在 HTML 中使用 <script> 元素引入 Javascript , <script> 有以下 4 个常用属性: async: 异步加载,只对外部脚步有效. d ...
- 解放程序员双手之Supervisor
前言 对于大部分程序员来说,主要工作都是进行编码以及一些简单的中间件安装,这就导致了很多人对于“运维”相关的工作会比较生疏.例如当我们拥有一台自己的服务器以后,可能会在上面跑一跑自己blog程序, ...
- 面试前必须要知道的Redis面试题
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 从零单排学Redis[青铜] 从零单排学 ...
- Odoo：全球第一免费开源ERP权威性能测试报告完整版（绝对珍藏）
Odoo平台简介 Odoo(以前叫OpenERP)是世界排名第一的开源ERP系统,最早由比利时一家公司开发,经过十几年发展,目前全世界Odoo的使用者超过2百万人,Odoo被翻译成几十种语言,Odoo ...
- SQL两列数据,行转列
SQL中只有两列数据(字段1,字段2),将其相同字段1的行转列 转换前: 转换后: --测试数据 if not object_id(N'Tempdb..#T') is null drop table ...
- AI应用开发实战 - 定制化视觉服务的使用
AI应用开发实战 - 定制化视觉服务的使用 本篇教程的目标是学会使用定制化视觉服务,并能在UWP应用中集成定制化视觉服务模型. 前一篇:AI应用开发实战 - 手写识别应用入门 建议和反馈,请发送到 h ...