09-JS的事件流的概念(重点)
在学习jQuery的事件之前,大家必须要对JS的事件有所了解。看下文
事件的概念
HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。
什么是事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
① 事件捕获阶段;
② 处于目标阶段;
③ 事件冒泡阶段
那么其实呢,js中还有另外一种绑定事件的方式:看下面代码:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>事件流</title><script>window.onload = function(){var 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:;" id="btn">按钮</a> </body> </html>
当我们点击这个btn的时候,看看页面都输出了什么:
在解释输出结果为什么是这样之前,还有几个知识点需要了解一下即可:
1、addEventListener
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
2、document、documentElement和document.body三者之间的关系:
document代表的是整个html页面;
document.documentElement代表的是<html>
标签;
document.body代表的是<body>
标签;
接着我们就来聊聊上面的例子中输出的结果为什么是这样:
在标准的“DOM2级事件”中规定,事件流首先是经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段。这里可以画个图示意一下:
首先在事件捕获过程中,document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标,就是id为btn的a标签。
接着在事件冒泡过程中,事件开始时由最具体的元素(a标签)接收,然后逐级向上传播到较为不具体的节点(document)。
需要注意的点:由于老版本的浏览器不支持事件捕获,因此在实际开发中需要使用事件冒泡,在由特殊需要时再使用事件捕获
补充知识了解即可:
1、IE中的事件流只支持“事件冒泡”,但是版本到了IE9+以后,实现了“DOM2级事件”,也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。
2、在DOM事件流中,实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发,并在事件处理中被看成“冒泡阶段”的一部分。然后,“冒泡阶段”发生,事件又传播回文档。
jquery的常用事件
jquery常用的事件,大家一定要熟记在心
转载于:https://www.cnblogs.com/zh-lei/p/9418835.html
09-JS的事件流的概念(重点)相关推荐
- 后处理程序文件大小的变量_【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?...
关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
- JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录 一.事件与事件流 二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式 三.事件对象 四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
- js 事件流的事件冒泡和事件捕获与阻止事件传播
为了方便引入事件流的概念,我们先来说说什么是事件. 事件就是用户或浏览器自身执行的某种动作.换句话说,我们在浏览网页或者 APP 时,通常会在设备上产生很多交互性的操作,例如点击.选择.滚动屏幕.键盘 ...
- 事件流的架构能解决哪些问题?
大数据与 AI 时代不仅给人们带来了生活上的便利,也给软件工程师.系统架构师.数据分析师带来了技术上的挑战.那么,如何在面临海量数据的情况下构 建一个健壮.可扩展.响应迅速的数据类应用,并且兼顾系统模 ...
- Vue.js笔记------事件
一.事件与事件流 1.事件与事件流 [事件] JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性.常见的有加载事件.鼠标事件. [事件流] 由于 ...
- js中事件对象event
一.Event对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 当一个事件发生的时候, ...
- 理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
- js动态绑定事件方法
1.给对象绑定事件 var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); ...
- JS事件流和事件委托
在上一篇<JS知识点大杂烩>中说到了事件流但没有详细的介绍,这篇文章就来介绍一下事件流. 事件流一共由三个阶段分别是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 复制代码 事件绑定大家都知 ...
- js事件流的三个阶段
2019独角兽企业重金招聘Python工程师标准>>> js事件流分为三个阶段: 1.事件捕获:当某个元素出发某个事件,顶层对象document就会发出一个事件流, 随着DOM树的节 ...
最新文章
- python-环境准备python,ipython
- C/Cpp / #define
- 计算机专业的校本教材,[中职计算机专业校本教材建设思路与实践]中职计算机专业课程...
- Web安全——易班优课YOOC课群在线测试自动答题解决方案
- 美团扫码付的前端可用性保障实践
- Android官方开发文档Training系列课程中文版:分享简单数据之从其它APP接收简单数据
- python怎么一直循环_python 基础之while无限循环
- 如何查看cplex的help文档_word查看技巧:如何快速找到文档的修改痕迹
- 【C语言】在线OJ题 BC99-BC119-牛客网编程初学者入门训练
- mapinfo在线地图插件_官方插件“战争游戏”使用指南 公测同步开启
- 亚马逊便携式小空调冷风机英国站UKCA认证测试标准
- caxa齿轮零件图_CAXA软件如何快速地画一个齿轮?
- xp提示计算机内存不足,在xp系统中,经常提示虚拟内存不足的原因是什么?
- Logistic-tent混沌系统matlab
- 德州仪器(TI)3D机器视觉参考设计
- HC-SR04超声波模块
- fooview辅助功能 shell_fooView — 安卓最强大的悬浮球应用
- 网站添加头部Meta property=og协议的使用方法详解教程
- HDU 6217 BBP Formula (数学)
- STM32 PWM控制舵机——原理、接线、源程序
热门文章
- mysql中count(*)、count(1)和count(字段)的区别
- js系列之每天一练成长录之一
- 字符串缓冲区和字符串构造器
- 颠覆传统网络管理 Aruba新一代网络解决方案重磅呈现
- 解决Instruments检测内存泄漏时真机无法定位的问题
- 《PIC微控制器项目设计:C语言》一导读
- ARM汇编初探---汇编代码中都有哪几类指令---ARM伪指令介绍
- LayIM v2.x 正式开源,Web 即时通讯前端解决方案
- python 的for与while 的i改变
- I.MX6 busybox set hosname and login with root