Javascript 事件流+事件处理程序

事件流+事件处理程序

事件流

描述了页面接收事件的顺序

当你点击一个按钮时，不光点击了这个按钮，还点击了他的容器和整个页面。书上的比方：在一张纸上画几个同心圆，把手指放到圆心上，手指是在所有的圆圈里面）

事件冒泡

定义：事件是从最具体的元素（文档树中最深的结点）开始触发，然后向上传播至没有那么具体的元素（文档）

事件沿着DOM树一路向上，在经过的每个节点上依次触发，直到达到document对象

事件捕获

定义：最不具体的节点应该最先收到事件，而最具体的节点最后收到事件

实际是为了在时间达到最终目标前拦截事件

实际上，所有浏览器都是从window对象开始捕获事件，而DOM2Events规范规定从document开始。

DOM事件流

DOM2Events 规范规定事件流分为三个阶段：事件捕获、达到目标和事件冒泡。

事件捕获最先发生，为提前拦截事件提供了可能；然后实际的目标元素接收到事件，最后一个阶段是冒泡，最迟要在这个阶段响应事件

事件处理程序

为响应事件而调用的函数称为事件处理程序（事件监听器）

通常事件处理程序的名字以on开头

1、HTML 事件处理程序

先创建一个函数封装属性的值，这个函数会有一个特殊的局部变量event，而保存的就是event对象

<button οnclick="fn()">点击这里</button>
<script>
    function fn() {
        alert("这是点击事件")
    }
</script>

2、DOM0事件处理程序

把一个函数赋值给DOM元素的一个事件处理程序属性，所赋函数被视为元素，事件处理程序在元素作用域中进行。

以这种方式添加的事件处理程序是注册在事件流的冒泡阶段的。

通过将事件处理程序的属性值设置为null，可以移除通过DOM0方式添加的事件处理程序。

let btn = doucument.getElementById("mybtn");
btn.onclick = function() {
	console.log('Hello world');
};

btn.onclick = null;

3、DOM2事件处理程序

DOM2 Event是为事件处理程序的赋值和移除定义了两个方法----addEventListener()和removeEventListener（

这两个方法暴露在DOM节点上，接收三个参数，事件名，事件处理函数和一个布尔值（当布尔值为false时事件处理程序会在事件冒泡阶段被触发）。

通过addEventListener()添加的事件处理程序只能用removeEventListener()并且传入与添加时同样的参数来移除，意味着addEventListener()添加的匿名函数无法移除。

补充：匿名函数

匿名函数顾名思义指的是没有名字的函数

(function (){
    console.log('hello world');
})();

4、IE事件处理程序

attachEvent()和detachEcent()，接收事件处理程序的名字和事件处理程序函数两个参数。这里添加的事件处理程序只会添加到冒泡阶段。

这里与DOM0的主要区别：事件处理程序的作用域，在这里事件处理程序是在全局作用域中云顶的，this等于window，而DOM0中事件处理程序中的this值等于目标元素。

该方法也可以为同一个对象添加不同的事件处理程序，不过与DOM方法不同，这里的事件处理程序以添加它们的顺序的反方向触发。

作为事件处理程序添加的匿名函数也无法移除，只有传给detachEvent()方法相同的函数引用才可以移除。