removeEventListener 的行为答案

【问题标题】：Behavior of removeEventListenerremoveEventListener 的行为
【发布时间】：2012-11-08 14:08:15
【问题描述】：

请检查以下代码：

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 不起作用？

【问题讨论】：

removeEventListener 需要两个参数；只有第三个参数是可选的。
相关：How to remove all listeners in an element?

标签： javascript dom-events

【解决方案1】：

我最近在 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);
      });
    };
  });

【讨论】：

【解决方案2】：

removeEventListener 接受 2 个参数、事件和要删除的函数。
这应该有效：

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

另外，你正在执行的函数是空的。

var clickfn = function(){  };

【讨论】：

好的，谢谢，我以为 removeEventListener("click") 会删除所有绑定到它的函数。我的错
如果我有一个回调函数要删除（匿名）怎么办？我传递了函数本身，但似乎不起作用
您需要传递对要删除的函数@emreozgun10 的引用。所以你需要将匿名回调存储在某个地方。

【解决方案3】：

您必须将您指定给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 );

↪View an example at jsFiddle

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

【讨论】：