什么是JavaScript事件
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了;通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应
事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
事件流
事件流就是描述了页面中接受事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，出现了一个坑爹的情况，那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的：IE的事件冒泡，Netscape的事件捕获
事件冒泡
事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）
事件捕获
事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件
Javascript事件处理程序的3种方式
内联形式
耦合度高，不利于维护
<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>
HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下面这段代码：
<input id="btn1" value="按钮" type="button" onclick="showmsg();">
<script>
function showmsg(){
alert("HTML添加事件处理");
}
</script>
从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要在js中修改，还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用
属性绑定（DOM0级事件）
只能绑定一个函数,在元素处于目标时触发该事件
即为指定对象添加事件处理，看下面的一段代码
<input id="btn2" value="按钮" type="button">
<script>
var btn2= document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件，将其置为null即可
</script>
从上面的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经大大降低;但是，聪明的程序员还是不太满足，期望寻找更简便的处理方式
事件监听函数（DOM2级事件）
当addEventListener的最后参数为false时，是在冒泡阶段触发。如果是true的话是在捕获阶段出发。attachEvent始终是冒泡阶段触发
element.addEventListener(<event-name>, <callback>, <use-capture>);
element.removeEventListener(<event-name>, <callback>, <use-capture>);
element.attachEvent(event, callback)(IE11以后用addEventLisener)；
element.detachEvent(event, callback)(IE11以后用addEventLisener)；
DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()
它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：
<input id="btn3" value="按钮" type="button">
<script>
var btn3=document.getElementById("btn3"); btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
function showmsg(){
alert("DOM2级添加事件处理程序");
}
btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
</script>
这里我们可以看到，在添加删除事件处理的时候，最后一种方法更直接，也最简便。但是需要注意的是，在删除事件处理的时候，传入的参数一定要跟之前的参数一致，否则删除会失效！
当同一个对象触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行
事件代理
原理：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上，利用冒泡的原理，把事件加到父级上，触发执行效果
在父元素上绑定事件，监听子元素的事件;主要用于子元素是新建元素或者子元素个数很多的情况下;这种方法可以提高性能，同时避免提前绑定元素事件而导致新建元素的事件没有生效的结果
<ul> <li>11111111111111111111</li> </ul>
document.addEventListener('click', function (e) {
console.log('document currentTarget: ' + e.currentTarget.nodeName);
console.log('document target: ' + e.target.nodeName);
if (e.target.nodeName === 'LI') {
console.log('dom delegate: ' + e.eventPhase);
}
console.log(this);
}, true);
使用事件委托对于web应用程序带来的几个优点：
1.可以大量节省内存占用，减少事件注册
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定
3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率
缺点：
不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）
在管理鼠标事件的时候有些需要注意的地方；如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。
事件冒泡和事件捕获的流程与区别
DOM2级事件规定事件包括三个阶段：
1、事件捕获阶段；
2、处于目标阶段；
3、事件冒泡阶段。
首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡
DOM2级事件规定事件包括三个阶段：
首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡
这里为什么没有布尔值呢？因为ie8以及更早的版本只支持事件冒泡，所以最后一个参数默认的相当于false来处理
事件的传播是可以阻止的：
在W3c中，使用stopPropagation（）方法
在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后面的冒泡过程也不会发生了~
阻止事件的默认行为，例如click 后的跳转~
在W3c中，使用preventDefault（）方法；
在IE下设置window.event.returnValue = false;
自定义事件
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”,“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡
3）cancelable(布尔值)：标示事件是否可以取消
4）detail（对象）：任意值，保存在event对象的detail属性中
可以像分配其他事件一样在DOM中分派创建的自定义事件对象