DOM事件类

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  ... 目标元素

冒泡：相反

 // 捕获 过程，冒泡把true改成false
 var ev = document.getElementById('ev');
 window.addEventListener('click', function() {
     console.log("window capture");
 }, true);
 document.addEventListener('click', function() {
     console.log("document capture");
 }, true);
 document.documentElement.addEventListener('click', function() {
     console.log("html capture");
 }, true);
 document.body.addEventListener('click', function() {
     console.log("body capture");
 }, true);
 ev.addEventListener('click', function() {
     console.log("ev capture");
 }, true);

注意：获取html标签是：document.documentElement

5、event对象的常见应用

 event.preventDefault();//阻止默认事件
 event.stopPropagation();//阻止事件冒泡
 event.stopImmediatePropagation();//事件响应优先级
 event.currentTarget();//当前所绑定的事件的对象
 event.target();//事件委托，判断哪个被绑定

6、自定义事件

 // 自定义事件
 var eve = new Event('test');
 ev.addEventListener('test', function() {
     console.log("test dispatch");
 });
 setTimeout(function() {
     ev.dispatchEvent(eve);
 }, 2000)