这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战
一、DOM事件模型
DOM事件模型有两种：脚本模型、内联模型、动态绑定
<body>
<!--脚本模型-->
<button onclick="javascrpt:alert('one')">one</button>
<!--内联模型-->
<button onclick="showPop()">two</button>
<!--动态绑定-->
<button id="btn3">three</button>
</body>
<script>
// DOM0：同⼀个元素，同类事件只能添加⼀个，如果添加多个，
// * 后⾯添加的会覆盖之前添加的
function showPop() {
alert("two");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("three");
}
/*DOM2:可以给同⼀个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("one");
});
btn3.addEventListener("click",function () {
alert("two");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE one");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C one");
})
}
</script>
二、DOM事件流
首先，事件是⽂档或浏览器窗⼝中发⽣的⼀些特定的交互瞬间，⽽事件流⼜是事件传播描述的是从⻚⾯中接收事件的顺序。
事件冒泡
事件冒泡(event bubbling)，是事件开始时由某个具体的元素(⽂档中嵌套层次最深的那个节点)接收，然后逐级向上传播到 较为不具体的节点。
<body>
<div>
<ul>
<li>click1</li>
</ul>
</div>
</body>
$("li").click(function() {
//点击li元素
})
这时候点击了li元素，click事件沿DOM树向上传播，在每个节点上都会发生click事件，只是没有绑定所以没有处理。
三、事件委托
利用事件冒泡，只指定一个事件处理程序，就可以管理一个类型的所有事件，如果要绑定大量事件通常会使用事件委托（利于上面的li，如果由多个就会使用事件委托）。是某个不太具体的节点应该更早接收到事件，而具体节点应该由最后接收到的事件。事件捕获在于事件达到某个条件之前就捕获它。
例如刚刚的li点击事件，document对象先接收到click事件，然后由着DOM树依次向下查找，一直到事件相同的dom元素开始执行。
事件流
事件流又被称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
优点：
1、节省内存占用，减少事件注册
2、新增子对象时无需再次对它绑定事件，动态添加的元素也可适用
缺点：
1、具有局限性，例如focus,blur这些获取焦点的事件，本身没有事件冒泡的机制，所以不能委托。
2、但是mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置我计算定位，并且对性能消耗太高，不适合事件委托。
七夕快乐，请你喝一辈子奶茶！@花猫
