笔记|js事件流笔记|js

什么是js事件流

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

微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。
事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
接下来就是介绍这两种事件流概念
事件冒泡流，
事件冒泡就是从目标事件开始，把事件一点一点像父元素传递
事件捕获流。
事件捕获就是从父元素流向目标元素
Dom事件流
DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件处理程序响应某个事件的函数就叫做事件处理程序（事件监听器），事件处理程序的名字以on开头，click=>onclick、load=>onload
DOM2提供了两个方法来让我们处理和删除事件处理程序的操作：addEventListener()和removeEventListener
addEventListener()和removeEventListener的第三个参数能够规定采用什么事件流

btn.addEventListener('click', function () { alert('事件捕获'); }, true);

btn.addEventListener('click', function () { alert('事件冒泡'); }, false);

事件对象触发dom上的某个事件时，会产生一个事件对象，里面包含着所有和事件有关的信息。
比较常用的有以下几个
currentTarget 事件处理程序当前正在处理事件的那个元素（始终等于this）
preventDefault 取消事件默认行为,比如链接的跳转
stopPropagation 取消事件冒泡
target 事件的目标
阻止事件冒泡 1、stopImmediatePropagation方法：
stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行
【笔记|js事件流】2、stopPropagation方法：
stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序
用法