DOM事件

在DOM2级，DOM事件被修订的相当完善了，我们目前用的，主要源自DOM2级的标准。

所有DOM节点对象，原型链中都有EventTarget对象，也就是说，他们继承了该对象的属性和方法。所以事件的监听和触发也都定义在这个对象。

给元素添加监听事件有三种方法：

①，<div cilck="fun()"></div>

该方法需注意，事件名前不用加 on ，监听函数要以直接调用的形式，事件只在冒泡阶段触发。

②，node.onclick = function (){}

该方法也只在冒泡阶段触发，且不能给当前节点重复绑定相同事件，同一事件只能绑定一个监听函数，要是写第二个就会直接覆盖

③，下文

添加监听事件：

EventTarget.addEventListener()

该方法接受三个参数：①事件类型，②，监听函数，③布尔值（触发阶段，true为捕获阶段，false为冒泡阶段，默认不写为false）

如果只想该监听函数执行一次可以修改第三个参数，如下：

{once：true}

由上可见，第三个参数可以是一个对象，其实这个对象里面有三个属性，除了上面两个还有一个：

三个属性

addEventListener方法可以为针对当前对象的同一个事件，添加多个不同的监听函数。这些函数按照添加顺序触发，即先添加先触发。如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener方法手动去除）。

监听函数内的参数：

①，Event.currentTarget，Event.target

Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。

Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象。

②，Event.preventDefault()

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

注意，该方法只是取消事件对当前元素的默认影响，不会阻止事件的传播。如果要阻止传播，可以使用stopPropagation()或stopImmediatePropagation()方法。

③，Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

移除监听事件：

EventTarget.removeEventListener()

注意，removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一个元素节点，也必须相同触发阶段，否则无效。

事件的传播：

一个事件发生后，会在子元素和父元素之间传播。这种传播分成三个阶段。

第一阶段：从window对象传导到目标节点，称为“捕获阶段”。

第二阶段：在目标节点上触发，称为“目标阶段”。

第三阶段：从目标节点传导回window对象，称为“冒泡阶段”。

这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

事件的代理：

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理：

事件代理

PS：记下几个用过的事件

        visibilitychange：该事件监听页面状态，在用户离开和进入页面时触发（我是在轮播图中用到的），可搭配属性：document.hidden 该属性返回一个布尔值，可根据这个属性来判断用户行为。