為什么我的刪除事件偵聽器不起作用？

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);