一、 L0 -- 传统注册事件
1. 同一个对象,后面注册事件会覆盖前面注册的 (同一事件)
2. 直接使用null覆盖就可以实现事件的解绑
3. 都是冒泡阶段执行的
<button>按钮</button>
<script>
let btn = document.querySelector('button')
btn.onclick = function () {
alert(1)
}
btn.onclick = function () {
alert(2)
}
</script>
进行了覆盖 只弹出一次对话框
点击后 没有反应 -- 已经解绑成功
二、L2 -- 事件监听注册
1. 同一个对象,后面注册事件不会覆盖前面注册的 (同一事件)
2. 匿名函数无法解绑
3. 可以自定义是否进行冒泡阶段执行
4. 必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段
1
1
第三个参数 : true 捕获
false 冒泡 (默认)
<button>按钮</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click',function () {
alert(1)
})
btn.addEventListener('click',function () {
alert(2)
})
</script>
不会覆盖 都会按照顺序进行显示出来
进行解绑不能使用匿名函数!!!!
<button>按钮</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click',test)
function test() {
alert(1)
}
// 解绑
btn.removeEventListener('click',test)
</script>
点击失效