事件移除函数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不起作用？

- Gautham Renganathan

---

使用 removeEventListener 方法时，需要提供两个参数，只有第三个参数是可选的。 - apsillers

相关：如何删除元素中的所有监听器？ - apsillers

Answer 1

removeEventListener 接受两个参数，一个是事件，另一个是要移除的函数。
这应该是有效的：

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

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

var clickfn = function(){  };

- Cerbrus

---

好的，谢谢。我以为 removeEventListener("click") 会移除绑定到它上面的所有函数。我的错。 - Gautham Renganathan

如果我有一个回调函数要删除（匿名的），我传递函数本身，但似乎不起作用。 - emre-ozgun

你需要传递一个对要删除的函数的引用，@emreozgun10。因此，您需要将该匿名回调存储在某个地方。 - Cerbrus

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上查看一个示例: http://jsfiddle.net/zsAXY/

你可以在Mozilla开发者wiki上了解更多相关信息。

- user2428118

Answer 3

最近我在ReactJS中的Navbar代码遇到了一个问题，即在y轴滚动100px后为Navbar设置背景颜色，并在页面视图在距离顶部100px以内时将其删除。

我所要做的就是在removeEventListener中引入一个reverse函数，以便为其应用规则。

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

- Stephen Ng'ang'a