Use of addeventlistener in JS

Use addEventListener The binding event ：MDN in addEventListener() explain

Use removeEventListener You can unbind Events ： MDN in removeEventListener() explain

1, We use addEventListener When , It is mainly used to realize the binding and listening of events

      There are three parameters target.addEventListener(type, listener, useCapture);

      type: A string representing the type of listening event . Be similar to click,mouseover...
      listener: Functions and methods used for listening and processing
      useCapture: The default is false, Event Bubbling , It can be set to true by Event capture

Here you need to understand the basic event flow ( Event capture -> The objective of the event -> Event Bubbling )
Event capture : Events are passed from the topmost element to the target element ( It's from the outside to the inside )
The objective of the event : The event reaches the target element . If the event specifies no bubbling . Then it will stop here
Event Bubbling : Events are passed from the parent element of the target element up to the topmost element ( From the inside out )

As shown in the figure below, the prototype diagram of event capture and event bubbling ：

 2, Show the binding of events through the actual case list

HTML  Elements p yes div Child elements

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

（1）, Default form (false) Is triggered by event bubbling

If the child element and the parent element are used at the same time addEventListener Triggering event , When a child element event is triggered , The event of the parent element will be triggered after the event of the child element is triggered , This is the bubble of events , From the inside out Trigger the inner layer first p Bound events , Then trigger the... Of the outer layer div Bound events

const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, false)
div.addEventListener("click", divClickEvent, false)
function pClickEvent() {
  alert("p  Element click event triggers ")
}	
function divClickEvent() {
  alert("div  Element click event triggers ")
}

result ：

（2）, Event capture (true)

If the child element and the parent element are used at the same time addEventListener Triggering event , The third parameter set at the same time is true, It indicates that the event is triggered in the form of capture , From the outside to the inside Trigger the outer layer first div Bound events , Then trigger the inner p Bound events

const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, true)
div.addEventListener("click", divClickEvent, true)
function divClickEvent() {
  alert("div  Element click event triggers ")
}
function pClickEvent() {
  alert("p  Element click event triggers ")
}

  result ：

（3）. Unbind (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  Element click event triggers ")
}
function pClickEvent() {
  alert("p  Element click event triggers ")
}
btn.onclick = () => {
  div.removeEventListener("click", divClickEvent)
  p.removeEventListener("click", pClickEvent)
}

result ：

 

（4）, You need to pay attention to ！

（1） If the event is bound to addEventListener The third parameter passed is true, Then, when you unbind, you also need to give removeEventListener Pass the third parameter as true, Otherwise, unbinding will fail

div.addEventListener("click", divClickEvent, true)
p.addEventListener("click", pClickEvent, true)

If the binding form is the above type , Unbinding must be given as true

div.removeEventListener("click", divClickEvent,true)
p.removeEventListener("click", pClickEvent,true)

（2） Use addEventListener When binding events Arrow functions or anonymous functions are not recommended , This will happen removeEventListener Unable to unbind

The following will happen removeEventListener Will invalidate

div.addEventListener("click", () => {console.log(123, '123')})
div.removeEventListener("click", () => {console.log(123, '123')})