- 基本概念
1.DOM0
element.onclick=function(){}
2.DOM2
element.addEventLinstener('click',function(){},false)
false:表示在事件冒泡时执行
true:表示在事件捕获时执行
3.DOM3
element.addEventLinstener('keyup',function(){},false)
比DOM2新增一些事件类型
- DOM事件类型
事件捕获:从上往下
事件冒泡:从下往上
- DOM事件流
事件捕获-目标阶段-事件冒泡
- DOM事件捕获的具体流程
window->document->html->body->...->具体元素
- Event对象的常见应用
1.event.preventDefault()---->阻止默认事件
2.event.stopPropagation()---->阻止冒泡事件
3.event.stopImmediatepropagation---->阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡
4.event.currentTarget---->当前绑定事件的元素
5.event.target---->当前触发事件的元素
- 自定义事件
var eve=new Event('test');
element.addEventLinstener('test',function(){})
element.dispatchEvent(eve);