1、DOM中的事件級別

　　DOM0: element.onclick = function(){}

　　DOM1: 沒有與事件相關的設計

　　DOM2: element.addEventListener(‘click‘,function(){},false/true);冒泡/捕獲，默認冒泡

　　DOM3：element.addEventListener(‘keyup‘,function(){},false/true);多事件類型

2、DOM事件模型：捕獲 冒泡

3、事件流

　　階段一：捕獲階段

　　階段二：目標階段

　　階段三：冒泡階段

4、描述DOM事件具體流程

捕獲：window document HTML body div ... 目標元素

冒泡：相反

 1 // 捕獲 過程，冒泡把true改成false
 2 var ev = document.getElementById(‘ev‘);
 3 window.addEventListener(‘click‘, function() {
 4     console.log("window capture");
 5 }, true);
 6 document.addEventListener(‘click‘, function() {
 7     console.log("document capture");
 8 }, true);
 9 document.documentElement.addEventListener(‘click‘, function
 
() {
10     console.log("html capture");
11 }, true);
12 document.body.addEventListener(‘click‘, function() {
13     console.log("body capture");
14 }, true);
15 ev.addEventListener(‘click‘, function() {
16     console.log("ev capture");
17 }, true);

註意：獲取html標簽是：document.documentElement

5、event對象的常見應用

1 event.preventDefault();//阻止默認事件
2 event.stopPropagation();//阻止事件冒泡
3 event.stopImmediatePropagation();//事件響應優先級
4 event.currentTarget();//當前所綁定的事件的對象
5 event.target();//事件委托，判斷哪個被綁定

6、自定義事件

1 // 自定義事件
2 var eve = new Event(‘test‘);
3 ev.addEventListener(‘test‘, function() {
4     console.log("test dispatch");
5 }); 
6 setTimeout(function() {
7     ev.dispatchEvent(eve);
8 }, 2000)

DOM事件類