DOM 事件流 分为三个阶段
事件捕获 到达目标 事件冒泡
事件捕获阶段不会接收到事件,到body就结束了
捕获Document->html->body->div
冒泡div->body->html->Document
事件委托 addEventListener(事件名,事件处理函数,布尔值)
布尔值为true时 在捕获阶段调用事件处理程序
布尔值为false时 在冒泡阶段调用事件处理函数
DOM0 事件处理程序
// 绑定事件
btn.onclick=function(){
// 执行对应操作
}
// 移除事件
btn.onclick =null
DOM2 事件处理程序
let handler = function(){
console.log('事件触发')
}
// 事件绑定
btn.addEventListener('click',handler,false)
// 事件移除
btn.removeEventListener('click',handler,false)
需要注意的是 addEventListener()添加的事件处理函数只能使用removeEventListener()并传入与添加时同样的参数来移除。
这意味着使用addEventListener()添加的匿名函数无法移除!
通过DOM0方式给一个元素绑定多个事件只会执行最后一个
而通过DOM2方式绑定的事件都会执行,
只有当绑定的事件名称,函数名,事件发生阶段都一样时,才会覆盖。