1. 事件是什么

DOM事件即为Event对象。Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

JavaScript的事件机制也是一个标准的观察者模式（Observer Pattern）的应用，包含事件的订阅者（Subscriber）和事件发布者（Publisher），通过监听对象事件来执行事件处理程序（callback）。

通常事件与函数结合使用，函数不会在事件发生前被执行。

2. 事件绑定

要让javascript对用户做出相应，首先要对 DOM 元素绑定事件处理函数。javascript一共有三种方式可以为DOM元素注册事件处理函数。

通过HTML 属性

通过DOM 元素属性(DOM level 0 事件)

< button id='event'>Event

< script>

var button = document.querySelector('#event')

button.onclick=function(){

console.log("Hello world!")

}

< /script>

通过EventTarget.addEventListener(DOM level 2 事件)

< button id='event'>Event

< script>

var myButton = document.getElementById('event')

myButton.addEventListener('click', function(){

console.log('Hello world');

}, false);

< /script>

在javascript中，后两种方法（DOM level 0 事件和DOM level 2 事件）为最常见的绑定事件方法。其中DOM level 0 事件绑定只能添加一个，添加多个则后面会覆盖前面。而DOM level 2 事件绑定可以添加多个事件。

3. 事件阶段

一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段(capture phase)

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

目标阶段(target phase)

当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

冒泡阶段(bubble phase)

事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。

冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

ie默认支持事件冒泡阶段执行，其它浏览器默认支持事件捕获阶段执行。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行，默认值为false。<strong>(永远不要用true)</strong>

button.addEventListener('click', fn, true) // 捕获阶段执行(永远不用)

button.addEventListener('click', fn, false) // 冒泡阶段执行(默认)

4. 事件委托

在处理传统事件时，你按照需要为每一个元素添加事件监听器（如对多个<li>进行监听）。但是事件监听器是占内存的，如果处理不当的话会导致性能下降和内存溢出。

为了解决这个问题，JavaScript事件代理可以把事件处理器添加到一个父元素上，这样就避免了把事件处理器添加到多个子元素上。

<!DOCTYPE html>

<html>

<head>

<title>DOM Event</title>

<style>

li{

border: 1px solid black;

}

ul{

background-color: red;

padding: 20px;

}

</style>

</head>

<body>

<ul>

<li>iPhone</li>

<li>Macbook</li>

</ul>

</body>

var parent = document.querySelector('ul')

parent.addEventListener('click',function(e){

var el = e.target

//console.log(e.target)

while(el.tagName !== 'LI'){

if(el === parent){

el = null

break

}

el = el.parentNode

console.log(el)

}

if(el){

console.log(el.innerText)

}else{

console.log('未命中')

}

})

</script>

</html>

利用事件委托点击<li>时监听返回标签中的文本元素，点击<ul>则输出‘未命中’。

原文引用自：

链接：//www.greatytc.com/p/0d3d13ab5505

原生JS的事件委托