前端中的事件流

前端中的事件流

JavaScript 与 Html 之间的交互是通过事件实现的，而用户于浏览器页面的互动也是通过事件来实现的。

事件流

当页面中放了一个按钮，你用鼠标点击这个按钮，虽然你只是点击了这个按钮，但其实你也同时点击了这个按钮的所有父级元素。

事件流描述的是从页面中接收事件的顺序。

DOM事件流

DOM2级事件规定事件流包含三个阶段：

事件捕获阶段

处于目标阶段

事件冒泡阶段

事件冒泡

即事件从下级传递给上级。如果同时给儿子和父亲定义了事件，那么点击儿子，触发儿子的事件之后，也会再触发父亲的事件。浏览器是默认事件冒泡行为的。

但是在开发的过程中，我们大多数情况下是不需要事件冒泡的。我们想要的是点击儿子事件就只触发儿子事件，而不需要将父亲的事件触发。所有阻止上一级事件的触发就叫做阻止事件冒泡。

阻止事件冒泡

event.cancelBubble = true;

或

event.stopPropagation();

事件监听

addEventListener：addEventListener是从DOM2级事件新增的指定事件处理程序的操作，这个方法接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型(如"click" 或"mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

事件传递有两种方式，冒泡和捕获

事件传递定义了元素事件触发的顺序，如果你将P 元素插入到div 元素中，用户点击P元素，在冒泡中，内部元素先被触发，然后再触发外部元素；捕获中，外部元素先被触发，再触发内部元素。