关于JS中addEventListener的使用

关于JS中addEventListener的使用MDN中addEventListener()说明主要用来实现事件的绑定存在三个参数 target.addEventListener(type, listener, useCapture);type: 表示监听事件类型的字符串。类似于click,mouseover...listener: 用来监听处理的函数方法useCapture: 默认是false,

小火车况且况且

4027人浏览 · 2021-03-10 16:52:45

小火车况且况且 · 2021-03-10 16:52:45 发布

关于`JS`中`addEventListener`的使用

MDN中addEventListener()说明

使用`removeEventListener`可以解绑事件 MDN中removeEventListener()说明

主要用来实现事件的绑定
存在三个参数 target.addEventListener(type, listener, useCapture);

type: 表示监听事件类型的字符串。类似于click,mouseover...
listener: 用来监听处理的函数方法
useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获

这里需要了解一下基本的事件流(事件捕获->事件目标->事件冒泡)
事件捕获: 事件从最顶层元素一直传递到目标元素(就是从外往内)
事件目标: 事件到达目标元素. 如果事件指定不冒泡. 那就会在这里中止
事件冒泡: 事件从目标元素父元素向上逐级传递直到最顶层元素(就是从里往外)

在这里插入图片描述

HTML 元素p是div的子元素

<div class="div">
  <p class="p">addEventListener</p>
</div>

1. 默认形式(`false`)是按照事件冒泡触发

如果子元素和父元素同时使用addEventListener触发事件,在子元素事件触发的时候,父元素的事件会在子元素事件触发完成之后触发,这便是事件冒泡,从内到外先触发内层的p绑定的事件,再触发外层的div绑定的事件

const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, false)
div.addEventListener("click", divClickEvent, false)
function pClickEvent() {
  alert("p 元素点击事件触发")
}	
function divClickEvent() {
  alert("div 元素点击事件触发")
}

在这里插入图片描述

2. 事件捕获(`true`)

如果子元素和父元素同时使用addEventListener触发事件,同时设置第三个参数是true,说明事件是按照捕获的形式触发,从外到内先触发外层的div绑定的事件,再触发内层的p绑定的事件

const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, true)
div.addEventListener("click", divClickEvent, true)
function divClickEvent() {
  alert("div 元素点击事件触发")
}
function pClickEvent() {
  alert("p 元素点击事件触发")
}

在这里插入图片描述

3. 解除绑定(`removeEventListener`)

const div = document.querySelector(".div")
const p = document.querySelector(".p")
const btn = document.querySelector(".btn")
div.addEventListener("click", divClickEvent)
p.addEventListener("click", pClickEvent)
function divClickEvent() {
  alert("div 元素点击事件触发")
}
function pClickEvent() {
  alert("p 元素点击事件触发")
}
btn.onclick = () => {
  div.removeEventListener("click", divClickEvent)
  p.removeEventListener("click", pClickEvent)
}

在这里插入图片描述

4. 注意注意注意

如果绑定事件的时候给addEventListener传递了第三个参数为true,那么解除绑定的时候也需要给removeEventListener传递第三个参数为true,否则解绑会失败
```
div.addEventListener("click", divClickEvent, true)
p.addEventListener("click", pClickEvent, true)
```
如果绑定的形式为上面的类型,解除绑定必须给定为true
```
div.removeEventListener("click", divClickEvent,true)
p.removeEventListener("click", pClickEvent,true)
```
使用addEventListener绑定事件的时候不推荐使用箭头函数或者匿名函数,这样会出现removeEventListener无法解除绑定的问题
下面情况就会出现removeEventListener会无效化
```
div.addEventListener("click", () => {console.log(123, '123')})
div.removeEventListener("click", () => {console.log(123, '123')})
```