Remove dom does not call removeEventListener

const addDOM = () => {
  const div = document.createElement("div")
  div.addEventListener("click", e => {})
  document.body.appendChild(div)
  div.remove()
}

let i = 99999999
while(i-- > 0) {
  addDOM()
}

will it be bad if I don"t call removeEventListener to remove the event listener of click before removing a dom node?

Javascript
Mar.25,2021

as far as the code you give is concerned, it will not matter. After checking the, remove children with the chrome memery tool, the number of EventListener objects will be reduced.

The reason why the example of jzoom upstairs runs well makes you feel that Listener does not have automatic gc, because its div is a global variable, so even if it is removed from dom tree, the div object still exists on global and is referenced by global. The gc mechanism naturally does not clean up its listener, but the scope of your div is in the function of addDom, so once 999999 div are removed from dom tree, no object references them. The listener on their bodies will also be automatically gc.

the main test code 


const handle = e => { console.log('click event!') };
const div = document.createElement('div')
div.addEventListener('click', handle)
document.body.appendChild(div)
div.dispatchEvent(new Event('click'));
div.remove()
div.dispatchEvent(new Event('click'));
div.removeEventListener('click', handle);
div.dispatchEvent(new Event('click'));

after calling remove, you can still output using dispatchEvent, indicating that Listener has not been removed with remove. Be sure to call removeEventListener manually. So the conclusion is that it will have an impact.

clipboard.png

Previous: Some questions about vue watch

Next: Undefined occurs when using mobx

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu