removeEventListener 的行為

Question

請檢查以下代碼：

var clickfn = function(){
 alert("clicked");                    
}
document.getElementById("div1").addEventListener("click",clickfn,true);
clickfn = function(){  };
document.getElementById("div1").removeEventListener("click");

http://jsfiddle.net/qUtzL/4/

為什么removeEventListener不起作用？

Answer 1

removeEventListener需要 2 個參數，事件和要刪除的函數。
這應該有效：

document.getElementById("div1").removeEventListener("click", clickfn);

---

此外，您正在執行的函數是空的。

var clickfn = function(){  };

Answer 2

您必須指定您為addEventListener指定的確切函數作為第二個參數。 如果指定了第三個useCapture參數，則還必須指定與removeEventListener相同且等效的參數。

例如：

function myFunc(event){ alert(event.target.textContent); }

var myElement=document.getElementById('myElement');

//Add EventListener
myElement.addEventListener('click', myFunc, false );

/* ... */

//Remove EventListener
myElement.removeEventListener('click', myFunc, false );

↪在 jsFiddle 查看示例

您可以在Mozilla Developer wiki 中找到更多信息。

Answer 3

我最近在 ReactJS 中的導航欄代碼遇到了這個問題，在 y 軸上滾動 100 像素后為導航欄提供背景顏色，如果頁面視圖在頂部的 100 像素內，則將其刪除。

我所要做的就是在 removeEventListener 中引入一個反向函數來為它提供應用規則。

const [show, handleShow] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        // do this
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener('scroll', () => {
        if (window.scrollY < 100) {
          // do this
          handleShow(false);
        } else handleShow(true);
      });
    };
  });