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

↪View an example at jsFiddle

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

Answer 3

我最近在ReactJS中使用Navbar代码遇到了这个问题，它是在y轴上滚动100像素后为Navbar提供背景色，如果页面视图位于顶部100 px之内，则将其删除。

我要做的就是在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);
      });
    };
  });

removeEventListener的行为

3 个答案: