为什么匿名函数添加的事件，无法删除？

站长

2024年06月18日 23:56 · 阅读数 64

👉根本原因是：匿名函数是没有地址内存的一块空间，其生存期即被调用后就被清除.

比如如下代码：

<body>
  <button>点我</button>
  <button id="del">删除事件</button>
  <script>
    let btn = document.querySelector('button')
    // 匿名函数添加的事件
    btn.addEventListener('click', function () {
     alert(123)
    })
	//想删除btn按钮的事件
    document.querySelector('#del').addEventListener('click', function () {
       btn.removeEventListener('click', function () {
			alert(123)
       })
  </script>
</body>

此时，无法删除btn的点击事件，这是因为点击btn时，内存随机分配了一个空间给这个匿名函数，当点击完成后，这个匿名函数被销毁，空间又被收回，并随机分配给了其他函数；
而点击#del删除按钮时，内部虽然给btn添加了一个删除事件，但此时的function匿名函数，已经不是原来btn中的function匿名函数了，说人话就是：现在根本找不到btn原来的那个匿名函数了，因为它被用完之后，就销毁了，因此无法删除

转载自:https://juejin.cn/post/6899775214977351693