事件类型分类：
1 添加在html结构中的事件
<div id="div1" onclick="alert(‘append click event in html‘)"> </div>
点击div1之后弹出 append click event in html；其实在html结构中添加的事件也属于dom0级事件。
2 dom0级事件处理
<div id="div1"> </div>
<script>
var dom1 = document.getElementById(‘div1‘);
dom1.onclick = function(){alert(‘ first dom0 ‘)};
dom1.onclick = function(){alert(‘ second dom0 ‘)};
</script>
点击div1之后只弹出 second dom0；说明dom0级事件后面赋值的事件会覆盖掉前面的
如果在div中在加 onclick="alert(‘append click event in html‘), 代码如下：
<div id="div1" onclick="alert(‘append click event in html‘)"> </div>
<script>
var dom1 = document.getElementById(‘div1‘);
dom1.onclick = function(){alert(‘ first dom0 ‘)};
dom1.onclick = function(){alert(‘ second dom0 ‘)};
</script>
点击div后 仍然只弹出second dom0， 说明在html中添加的点击事件处理程序也被覆盖。
实际上 dom1.onclick 等价于html结构中div标签中的onclick=""; 可以把onclick看成dom元素对象的一个属性 dom1{ id："1", onclick：function(){ ... } }
3 dom2级事件处理
dom.addEventListener（“事件名”，“事件处理程序”，“布尔值”）
布尔值表示该事件的响应顺序,默认值为false。
true：事件捕获：表示在捕获阶段调用事件处理程序。
false：事件冒泡：表示在冒泡阶段调用事件处理程序。
事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
使用addEventListener添加事件不会被覆盖也不会覆盖dom0级事件，如下：
<div id="div1" onclick="alert(‘append click event in html‘)"> </div>
<script>
var dom1 = document.getElementById(‘div1‘);
var handle = function () {
alert(‘dom2 event handle‘);
};
dom1.onclick = function(){alert(‘ first dom0 ‘)};
dom1.onclick = function(){alert(‘ second dom0 ‘)};
dom1.addEventListener("click", function(){alert(‘ first dom2 ‘)}, false);
dom1.addEventListener("click", handle, false);
</script>
点击div1时弹出 second dom0、first dom2 、dom2 event handle ，dom0级绑定的最后一个事件覆盖了前面所有的dom0级事件，而绑定的两个dom2级事件都存在。
使用removeEventListener移除事件，传入的参数与添加处理程序时addEventListener使用的参数相同。
这也意味着事件处理程序为匿名函数的无法移除，如下所示：
<div> </div>
<script>
var dom1 = document.getElementById(‘div1‘);
var handle = function () {
alert(‘event handle‘);
};
dom1.addEventListener("click", function(){alert(‘ first dom2 ‘)}, false);
dom1.addEventListener("click", function(){alert(‘ second dom2 ‘)}, false);
dom1.addEventListener("click", handle, false);
dom1.removeEventListener("click", handle, false);
dom1.removeEventListener("click", function(){alert(‘ second dom2 ‘)}, false);
</script>
点击div1依次弹出 first dom2 、second dom2
注意： IE8及更早IE版本，Opera7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
对于这类浏览器版本可以使用 attachEvent() 方法来添加事件，detachEvent() 方法来移除事件句柄
事件对象：在触发dom事件的时候都会产生一个事件对象
事件对象event：
1） type：获取事件类型
2） target：获取事件目标
3） stopPropagation（）：阻止事件冒泡
4） preventDefault（）：阻止事件默认行为
<div id="div1"> </div>
<script>
var dom1 = document.getElementById(‘div1‘);
dom1.addEventListener("click",function(event){console.log(event.type);console.log(event.target)})
</script>
console.log 输出： click , <div id="div1"> </div>
<div><a></a></div>
<script>
dom_div.addEventListener("click",fun_div)
dom_a.addEventListener("click",fun_a)
</script>
点击a时触发fun_a 由于事件冒泡再触发fun_div
在fun_a的末尾添加event.stopPropagation（）：阻止事件冒泡 则div中的click事件fun_div无效
<a href="http://www.baidu.com"></a>
dom_1.addEventListener("click",function(event){}) 点击之后a会跳转到百度 在回调函数function中添加event.preventDefault（）;阻止事件默认行为 点击之后不会跳转