jQuery系列（九）：JS的事件流的概念
1、事件概念
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
（1）什么是事件流
事件流描述的是从页面中接收事件的顺序
a、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function () {
let oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function () {
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click', function () {
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click', function () {
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click', function () {
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click', function () {
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click', function () {
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click', function () {
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click', function () {
console.log('body处于事件冒泡阶段');
}, false);
}; </script>
</head>
<body>
<a href="javascript:void(0)" id="btn">按钮</a>
</body>
</html>
执行效果：
解释：事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
2、jQuery中的常用事件
jQuery系列（九）：JS的事件流的概念的更多相关文章
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 前端 ----js的事件流的概念（重要）
09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页 ...
- JS的事件流的概念(重点)
09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件 ...
- JS的事件流的概念
事件的概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...
- 08 JS的事件流的概念(重点)
在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...
- jQuery 事件流的概念
jQuery 事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang=&quo ...
- js的事件流理解
面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...
- 09-JS的事件流的概念(重点)
在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...
- 09-----JS事件流的概念（重点）
在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...
随机推荐
- Linux挂载磁盘&kuoron
1.添加磁盘 物理服务器直接插上硬盘即可,虚拟机的话给直接添加磁盘即可,不懂的可以自行百度,比较简单. 2.管理磁盘分区,fdisk命令. 在Linux系统中,管理硬盘设备最常用的方法就当属 fdis ...
- Scrapy爬虫-win7下创建运行项目
开始的时候,我只安装了python3.5,安装不了scrapy库,网上搜了一下说是scrapy不支持python3.x 然后,我就又安装了python2.7 为了,默认使用2.7,我在环境变量path ...
- Elastic Search快速上手（3）：搜索
前言 存储好数据之后,便可通过RESTful API进行搜索. 详细文档可参考: --简单搜索https://www.elastic.co/guide/cn/elasticsearch/guide/c ...
- echarts 根据经纬度坐标在地图上描点
var mapData = [ {'latitude':30.67, 'longitude':104.07}, {'latitude':34.76, 'longitude':113.65}, {'la ...
- Asp.net core 学习笔记 QR code and Barcode
QR code 和 Barcode 经常会使用到. Java 阵营有著名的 zxing https://github.com/zxing/zxing .Net 有对接它的 port https://g ...
- Oracle 分页语句
** 写法1 :采用 ROWNUM的伪列: --查询10到20之间的数据 -- SELECT * FORM ( -- SELECT * , ROWNUM rn FROM TABLE_NAME -- W ...
- C++性能榨汁机之伪共享
C++性能榨汁机之伪共享 来源 http://irootlee.com/juicer_false_sharing/ 前言 在多核并发编程中,如果将互斥锁的争用比作“性能杀手”的话,那么伪共享则相当于 ...
- js之数据类型（对象类型——单体内置对象——Math）
Math是一个内置对象,它具有数学常数和函数的属性和方法.Math对象用于执行数学任务,和其它对象不同,Math只是一个静态对象并没有Math()构造函数,实际上,Math()只是一个由js设置的对象 ...
- 5.SpringMVC 配置式开发-处理器适配器
处理器适配器HandlerAdapter 1.SimpleControllerHandlerAdapter(默认) 所有实现了 Controller 接口的处理器 Bean,均是通过SimpleCon ...
- 如何准备Java的高级技术面试
一. 换位思考下,如果你面试官,你会怎么做 只能通过简历和面试来衡量,别无他法.如果某位大牛确认能力很行,但面试时无法充分地自证能力,那对不起了,过不了,现实就这样. 如果面试官由于能力不行,招进来一 ...