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
