关于事件流的简单理解

JS事件

1、首先，什么是事件？

JavaScript和Html发生交互是通过事件来实现的，事件，就是文档或浏览器窗口发生一些特定的交互的瞬间

2、什么是事件流？

事件流就是，事件传播的过程。

DOM中完整的事件流包括了三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段

事件通过捕获到达目标元素，这个时候就是目标阶段，从目标节点元素将事件上传到根节点的构成阶段，冒泡阶段

3、关于事件冒泡以及事件捕获

事件冒泡，也就是自下而上，从目标触发的元素逐级向上传播，直至window对象

事件捕获：

也就是从document逐级向下传播到目标元素，但是有与IE浏览器的限制，很少使用到事件捕获

后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

DOM2级事件规定的事件流包括三个阶段：（1）事件捕获阶段（2）处于目标阶段（3）事件冒泡阶段

3、关于DOM事件的处理

当我们在DOM节点中添加了事件之后，就需要对事件进行处理，而DOM事件的处理主要是分为4各级别：

DOM0级事件

DOM1级事件

DOM2级事件

DOM3级事件

DOM0级处理程序

把一个函数赋值给一个事件处理程序属性

    var btn2 = document.getElementById("btn2");btn2.onclick = function() {alert("hello world");}btn2.onclick = null;    //移除事件处理程序

DOM2级处理程序

DOM2事件机制

同样的事件和事件流机制下的相同方法只会触发一次。

为当前元素创建一个事件池,把所有需要绑定的方法存储到事件池中，当事件触发的时候,到对应的事件池中找到对应的方法依次执行即可

 let oDiv = document.getElementById("div1");function fn() {console.log("fn");return "100"}oDiv.addEventListener("click",  function () {console.log("fn");}, false);oDiv.addEventListener("click", fn1, false);oDiv.removeEventListener("click",  function () {console.log("fn");}, false);

备注：

其中DOM1级事件处理标准中并没有定义相关的内容，所以没有所谓的DOM1事件处理；

DOM3级事件是在DOM2级事件的基础上添加了更多的事件类型。

关于事件流的简单理解相关推荐

二分图带权最大匹配费用流_简单理解二分图与匈牙利算法
最近在看DETR等论文时时,看到了使用了二分图的最大匹配,对于没有计算机基础的我表示直接上来???,因此本篇博客主要介绍什么是二分图,以及二分图的匹配的匈牙利算法. 首先我们来看看二分图的定义: 二分 ...
RxJava 创建事件流
了解了 Rx 的概念,就要了解怎么创建和操作事件流了.操作事件流的原始实现是基于 C# 的 LINQ,而 LINQ 是受到 functional programming 启发的.如果你了解 LINQ ...
第三天：js中的事件提高篇（事件流，事件对象，事件委托深层次理解）
目录前言一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...
android 点击事件消费,Android View事件分发和消费源码简单理解
Android View事件分发和消费源码简单理解前言: 开发过程中觉得View事件这块是特别烧脑的,看了好久,才自认为看明白.中间上网查了下singwhatiwanna粉丝的读书笔记,有种茅塞顿开 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
带你理解DOM事件流
在做前端开发的时候,我们经常需要做一些各式各样的交互,如鼠标单击/双击/滑动事件.键盘事件等等等等,这些都是DOM事件.首先我们先看一个概念,叫DOM事件流. DOM事件流事件流:事件在目标元素和祖 ...
【追寻javascript高手之路05】理解事件流
前言新的一天又开始了,我们对今天对未来抱有很大期待,所以开始我们今天的学习吧,在此之前来点题外话,还是爱好问题. 周三的面试虽然失败,但是也是很有启迪的,比如之前我就从来没有想过爱好问题,我发现我的 ...
对事件触发（EventHandler）的简单理解
当某个对象的某个事件或者是执行过程发生了,这个对象可以通过事件通知另外一个对象,另外一个对象可以通过传递进来的参数进行相应的处理: 网上有很多关于事件触发的例子,借鉴其中的一个例子对事件触发做如下理解 ...