1.基本概念:DOM事件的级别
DOM0 element.onclick = function(){}
在js中:添加事件监听对象的形式
element.addEventListener("事件名", function(){})
DOM2 element.addEventListener('click', function(){}, false) //removeEventListener()
DOM3 element.addEventListener('keyup', function(){}, false) 事件类型增加了
1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型
2.DOM事件模型:事件发生的各个阶段
捕获(上到下) 冒泡(当前元素向上)
3.DOM事件流:浏览器在为当前页面
三个阶段:
捕获(true),依次记录各级父元素上绑定的处理函数
目标阶段(到达目标元素),
冒泡(false),依次触发各级父元素上的事件处理函数
4.描述DOM事件捕获的具体流程
捕获流程:window -> document -> html -> body ->一层一层 ->目标元素
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);
}, 1000);