DOM事件

DOM事件的级别

DOM0

var btn = document.getElementById('myBtn')
btn.onClick = function(){
    // do something
    // this -> btn
}
//移除事件绑定
btn = null
复制代码

DOM1标准制定的时候没有涉及和事件有关的东西

DOM2级事件

var btn = document.getElementById('myBtn')
//经过匿名函数添加事件处理函数
//经过匿名函数添加的事件处理函数没法移除
btn.addEventListener('click',function(){
    
},false)//冒泡阶段触发
btn.addEventListener('click',function(){
    
},true)//捕获阶段触发
//经过具名函数添加事件处理函数
var handler = function(){
   //dosomething
}
btn.addEventListener('click',handler,false)
btn.removeEventListener('click',handler,false)
复制代码

DOM3只是在DOM2的基础上增长了一些事件类型

1. keyup等等

DOM事件流

事件流描述的是页面中接受事件的顺序

1. 第一阶段：事件捕获阶段
2. 第二阶段：处于目标阶段
3. 第三阶段：冒泡阶段

描述DOM事件捕获的具体流程

1. 浏览器的实际实现中：第一个接受到时间的对象window
2. window->document->html(document.documentElement)->body(document.body)->….->目标元素->….冒泡->document->window
3. 获取html节点：document.documentElement

Event对象的常见应用

1. event.preventDefalut() //阻止默认行为
2. event.preventPropagation() //阻止事件冒泡
3. event.stopImmediatePropagation()
4. event.currentTarget //当前绑定事件的元素
5. event.target //当前被点击的元素

自定义事件

var eve = new Event('custome')
btn.addEventListener('custome',function(){
    
})
btn.dispatchEvent(eve)
复制代码

CustomEvent