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等等,可以 ...
随机推荐
- hyper-v虚拟机centos7网络配置
原文地址:https://jingyan.baidu.com/article/91f5db1b0279bd1c7e05e377.html hyper-v安装了centos7之后并不能上网,这里简单介绍 ...
- 实例详解jQuery的无new构建
jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法: // 无 new 构造 $( ...
- 使用Visual Studio2019 开启Openmp的方法
调试-->属性-->C/C++-->所有选项-->Openmp支持改为 是(可以使用下拉菜单) 严重性 代码 说明 项目 文件 行 禁止显示状态 禁止显示状态 错误 C2338 ...
- hdu 2066 Dijstra 堆优化
嗯 有广搜的意思 #include<cstdio> #include<iostream> #include<queue> #include<vector> ...
- python+django学习四
1.setting.py中设置好 STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')] 前端文件存 ...
- 使用XPath爬取网页数据
我们以我的博客为例,来爬取我所有写过的博客的标题. 首先,打开我的博客页面,右键“检查”开始进行网页分析.我们选中博客标题,再次右键“检查”即可找到标题相应的位置,我们继续点击右键,选择Copy,再点 ...
- Objective-C 之Extension
Objective-C 之Extension class extension:类扩展 类扩展与 category 有相似性,但在编译时它只能被添加到已有源代码的一类中(该类扩展和该类同时被编译). 在 ...
- 安卓开发之Toolbar返回键
本文前三步演示了为Toolbar添加返回键并实现返回的步骤,第四步给出了设置返回键颜色的方法. 1.在xml布局中引用toolbar: <android.support.design.widge ...
- 后台程序员简单应用前端的bootstrap(小白)
原因: 现在技术更新很快,我们需要掌握更多的语言和技术,公司现在也希望招全栈工程师. 名词: bootstrap(前端框架),less(css的扩充) 案例: 在bootstrap中常用row行级元素 ...
- 宝塔 + 阿里云ECS + MySql + Navicat 远程连接数据库
宝塔 + 阿里云ECS + MySql + Navicat 远程连接 1. root登录: 2. grant all privileges on *.* to root@'%' identified ...