为什么我的删除事件侦听器不起作用？

Question

我正在制作一个消息系统，并添加了文件上传。 我的 javascript 函数在单击时添加事件侦听器并且它们堆叠，但我的删除事件侦听器不起作用。 我的代码：

<script type="text/javascript">
    function bro() {
    document.querySelector('#file').removeEventListener('change',(e)=>{console.log('removed listener')}, true);
    document.querySelector('#file').addEventListener('change', function(e) {
      var file = this.files[0];

      var fd = new FormData();
      fd.append("file", file);
      var xhr = new XMLHttpRequest();
      var group_id = document.getElementById('group_id').value;
      var fullurl = '../backend/sendvideosandimages.php?id=' + group_id;
        xhr.open('POST', fullurl, true);
        xhr.onload = function() {
          if (this.status == 200) {
          };
      };
      xhr.send(fd);
    }, true);
    }
    </script>

输入：

<input type="file" id="file" onclick="bro()"name="file" value="FILE UPLOAD" style="opacity: 0;z-index: 100000; bottom: 17.5px; position: fixed; right: 10px;">

请帮忙

我的新代码仍然不起作用：

    <script type="text/javascript">
    function bro() {
      document.querySelector('#file').removeEventListener('change',Myhandlerfunction, true);
      document.querySelector('#file').addEventListener('change', Myhandlerfunction, true);
      function Myhandlerfunction() {
          var file = this.files[0];

          var fd = new FormData();
          fd.append("file", file);
          var xhr = new XMLHttpRequest();
          var group_id = document.getElementById('group_id').value;
          var fullurl = '../backend/sendvideosandimages.php?id=' + group_id;
            xhr.open('POST', fullurl, true);
            xhr.onload = function() {
              if (this.status == 200) {
              };
          };
          xhr.send(fd);
      }
    }
    </script>
``` It adds the event listener but doesn't remove it

Answer 1

这行代码不会调用您提供的函数处理程序：

    document.querySelector('#file').removeEventListener('change',(e)=>{console.log('removed listener')}, true);

removeEventListener工作方式是......假设您定义了myHandlerFunction()函数myHandlerFunction()其注册为事件侦听器，如下所示：

var myHandlerFunction = (e) => {console.log('removed listener')};
document.querySelector('#file').addEventListener('change', myHandlerFunction, true);

稍后，您可以像这样删除事件侦听器：

document.querySelector('#file').removeEventListener('change', myHandlerFunction, true);

之后，当引发此类事件时，它将不再调用您的处理程序函数。 您可以阅读有关removeEventListener() 的更多信息。

编辑：正如评论中所讨论的，OP 在注册它的函数bro()的范围内定义了函数处理程序。 对函数bro()多次调用导致向事件添加一个新的事件处理程序，而没有删除旧的事件处理程序。 在函数bro()范围之外定义函数处理程序允许删除处理程序。

Answer 2

当您使用 addEventListener 和 removeEventListener 时，您需要按名称定义函数，不要使用匿名函数

例如 ：

element.addEventListener('change', function x(e){
  console.log('event listener');
});

element.removeEventListener('change', x);