JS事件总结

DOM事件的级别

DOM0

• DOM0级事件会在冒泡阶段被处理

var btn = document.getElementById('myBtn')
btn.onclick = function(){
    //do something
    //this -> btn
}
//删除
btn.onclick = null

复制代码

DOM1标准中没有涉及事件相关的问题。

DOM2

• 优势:能够添加多个事件处理程序

element.addEventListener('click',function(){
    
})//默认冒泡阶段触发
element.addEventListener('click',function(){
    
},false)//冒泡阶段触发
element.addEventListener('click',function(){
    
},true)//捕获阶段触发
//经过以上匿名函数添加的事件点击函数，无法移除
var handler = function(){
	//事件处理函数
}
//移除
element.removeEventListener('click',hanler,false)
复制代码

DOM3:增长了DOM事件的类型

element.addEventListener('keyup',function(){
    
})
复制代码

DOM事件模型

1. 事件捕获
2. 事件冒泡

DOM事件流

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

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

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

1. 浏览器的实际实现中：第一个接收到事件的对象是window
2. window->document->html->body->....->目标元素->....冒泡->document->window
3. 获取html节点：document.documentElement

Event对象的常见应用

1. event.preventDefault()
2. event.stopPropagation()
3. event.stopImmediatePropagation()
4. event.currentTarget
5. event.target

自定义事件

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

• event.target返回触发事件的元素
• event.currentTarget返回绑定事件的元素