DOM 事件小计
-
基本概念：DOM 事件的级别
DOM0: element.onclick = function(){}
DOM2: element.addEventListener('click',function(){},false)
DOM3: element.addEventListener('keyup',function(){},false)
-
DOM 事件模型
- 捕获
- 冒泡
-
DOM 事件流
- 捕获 === > 目标阶段 ===> 冒泡
-
描述 DOM 事件捕获的具体流程
捕获具体流程（冒泡反之）
- window ===> document ===> html ===> body ===> … 目标元素
演示捕获流程：
//body 中新建一个 id 为 ev 的 div，宽高背景自己设置下
var ev = document.getElementById('ev')
window.addEventListener('click',function(){console.log('window captrue');
},true)//true 为捕获阶段触发，false 为冒泡阶段触发
document.addEventListener('click',function(){console.log('document captrue');
},true)
document.documentElement.addEventListener('click',function(){console.log('html captrue');
},true)
document.body.addEventListener('click',function(){console.log('body captrue');
},true)
ev.addEventListener('click',function(){console.log('ev captrue');
},true)
// 点击 id 为 ev 的 div，查看控制台打印如下
window captrue
document captrue
html captrue
body captrue
ev captrue
// 打印顺序与注册顺序无关
-
Event 对象的常见应用
- event.preventDefault() 阻止默认事件
- event.stopPropagation() 阻止冒泡
- event.stopImmediatePropagation() 事件响应优先级
- event.currentTarget 指向引起触发事件的元素
- event.target 事件绑定的元素
-
自定义事件（模拟事件）
var eve = new Event('custome');
element.addEventListener('custome',function(){console.log('custome');
});
element.dispatchEvent(eve);
// 注意是事件对象 eve 而不是事件名 custome