注册事件

事件类型	描述
click	单击鼠标左键触发
abclick	双击鼠标左键触发
mousedown	按下鼠标时触发
mouseup	松开鼠标时触发
mousemove	鼠标在元素上移动时持续触发
mouseover	鼠标移入时触发
mouseout	鼠标移除时触发

addEventListener 事件监听方式

eventTarget.addEventListener('type',listener,useCapture)

evenTarget.addEventListener( )方法将指定的监听器注册到evenTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。该方法接受三个参数：

1. type：事件类型字符串，比如click,mouseover,注意这里不带on
2. listener：事件处理函数，事件发生时，会调用该监听函数
3. useCapture：可选参数，是一个布尔值，默认是false

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent( )方法将指定的监听器注册到evenTarget（目标对象）上，当该对象触发指定事件时，指定的回调函数就会被执行。该方法接受两个参数：

1. eventNameWithOn：事件类型字符串，比如onclick,onmouseover,这里要带on
2. callback：事件处理函数，当目标触发事件时回调函数被调用

删除事件

removeEventListener

如果使用addEventListener()方法给元素添加事件，想要移除需使用removeEventListener()方法，并且第二个执行函数要一样。

detachEvent

如果使用了addEvent()方法给元素添加事件，想要移除需使用removeEventListener()方法

事件对象

观察下面两行代码：

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})

函数里面的参数 event 就是事件对象，我们也可以表示为 e ，event表示事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态。简单来说，当我们的事件发生后，跟事件相关的一系列信息数据的集合都放在event里。

事件委托

我们对一个多层级容器而言，不用每个节点单独设置监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理设置每个子节点。例如下面例子：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

给ul 注册点击事件。然后利用事件对象的 target 来找到当前点击的 li，点击 li 后事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。这样只操作了一次DOM，提高了程序效率。

var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
    console.log('e.target');
})