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()