js的事件流

js的事件传播遵循dom2级的事件流（ie和netscape都有自己的事件流，不过我感觉现在已经没有什么还在兼任ie8以下的浏览器了，所以在这里我就不详细介绍了）

事件流包括三个部分

一、事件捕获

事件捕获从document开始>html>body>事件的目标元素（div）向下传播

二、目标阶段

在目标元素上处理事件

三、冒泡阶段

从目标元素开始>body>html>document,向上传播

大多数的情况下，我们把事件处理程序添加到冒泡阶段以求得更好的兼容性，

我们可以通过DOM节点的addEventListener()添加事件处理程序，它接收三个参数，

1.事件名，如’click’

2.事件处理函数

3.布尔值   true代表在捕获阶段调用函数，false代表在冒泡阶段调用函数

同样,我们可一通过removeEventListener()来移除事件

​
let btn=document.getElementById('myBtn')
let handler=function(){
    alert(this.id)
}
// 添加
btn.addEventListener('click',handler,false)
// 移除
btn.removeEventListener('click',handler,false)

​

值得说明的是匿名函数事件处理程序无法通过removeEventListener()来移除

事件处理程序可以接收到event事件对象作为参数

最主要的两个方法

1.阻止事件的默认行为

event.preventDefault()

2.停止事件在DOM层次中的传播，即取消进一步事件捕获的冒泡

event.stopPropagation()