JavaScript事件
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。
一、事件绑定
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种常用的绑定事件的方法：
- 在DOM元素中直接绑定；
- 在JavaScript代码中绑定；
- 绑定事件监听函数。
1.1 在DOM元素中直接绑定
可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。
例：
<input type="button" value="点击" onclick="hello()">
<script>
function hello(){
alert("happy new year!");
}
</script>
1.2 在JavaScript代码中绑定事件
在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
例：
<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
alert("hello world!");
}
</script>
1.3 使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。
事件监听
事件监听，有3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
事件监听的优点
1、可以绑定多个事件。
<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1); //执行
btn4.addEventListener("click",hello2); //执行
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
【注】传统事件中，若绑定两个事件，则第二个事件会覆盖第一个事件
例：
<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("hello 1"); //不执行
}
btn3.onclick = function(){
alert("hello 2"); //执行
}
</script>
事件委托
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
事件委托实现的流程：
1.找到当前节点的父节点或祖先节点
2.将要添加的对象添加到找到的父节点上
3.找到想要触发的对象，如果触发对象符合条件，进行后续操作
什么是事件委托：
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：
- 提高性能。
- 后添加的li标签，没有拥有这个onclick
事件委托最强王者法则：
1、找到当前要添加事件的元素节点的父级或者祖父节点
2、将事件绑定在父一级的标签
3、找出触发该事件的对象(target，不能用this)，进行判断。然后触发之后要修改的样式也是通过targe进行修改
事件委托优点
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。
***2.事件委托可以为新添加的DOM元素动态的添加事件。(target)