我如何使用React useEffect窗口removeEventListener（react打开新窗口）

25-01-30 27

在这篇文章中，我们将为您详细介绍我如何使用ReactuseEffect窗口removeEventListener的内容，并且讨论关于react打开新窗口的相关问题。此外，我们还会涉及一些关于addEv

在这篇文章中，我们将为您详细介绍我如何使用React useEffect窗口removeEventListener的内容，并且讨论关于react打开新窗口的相关问题。此外，我们还会涉及一些关于addEventListener()与removeEventListener()、addEventListener()与removeEventListener()解析、addEventListener()和removeEventListener()追加事件和删除追加事件、Chrome：removeEventListener 不会删除 getEventListeners 返回的侦听器的知识，以帮助您更全面地了解这个主题。

本文目录一览：

我如何使用React useEffect窗口removeEventListener（react打开新窗口）
addEventListener()与removeEventListener()
addEventListener()与removeEventListener()解析
addEventListener()和removeEventListener()追加事件和删除追加事件
Chrome：removeEventListener 不会删除 getEventListeners 返回的侦听器

我如何使用React useEffect窗口removeEventListener（react打开新窗口）

在React
Hooks文档中，显示了如何在组件的清理阶段删除removeEventListener。https://reactjs.org/docs/hooks-
reference.html#conditionally-firing-an-effect

在我的用例中，我试图以功能组件的state属性为条件的removeEventListener。

这是一个示例，其中从不卸载组件，但应删除事件侦听器：

function App () {  const [collapsed, setCollapsed] = React.useState(true);  React.useEffect(    () => {      if (collapsed) {        window.removeEventListener(''keyup'', handleKeyUp); // Not the same "handleKeyUp" :(      } else {        window.addEventListener(''keyup'', handleKeyUp);      }    },    [collapsed]  );  function handleKeyUp(event) {    console.log(event.key);    switch (event.key) {      case ''Escape'':        setCollapsed(true);        break;    }  }  return collapsed ? (    <a href="javascript:;" onClick={()=>setCollapsed(false)}>Search</a>  ) : (    <span>      <input placeholder="Search" autoFocus />&nbsp;      <a href="javascript:;">This</a>&nbsp;      <a href="javascript:;">That</a>&nbsp;      <input placeholder="Refinement" />    </span>  );}ReactDOM.render(<App />, document.body.appendChild(document.createElement(''div'')));

（实时示例位于https://codepen.io/caqu/pen/xBeBMN）

我看到的问题是，每次组件渲染时，handleKeyUp内部引用removeEventListener都会发生变化。该函数handleKeyUp需要引用，setCollapsed因此必须用括起来App。搬进handleKeyUp里面useEffect也似乎会触发多次，并且失去了对原件的引用handleKeyUp。

如何在不卸载组件的情况下使用React Hooks有条件地window.removeEventListener？

答案1

小编典典

您可以将handleKeyUp函数放在给定的函数内部，useEffect并且仅添加侦听器，并且在collapsed为false 时返回清除函数。

useEffect(() => {  if (!collapsed) {    function handleKeyUp(event) {      switch (event.key) {        case "Escape":          setCollapsed(true);          break;      }    }    window.addEventListener("keyup", handleKeyUp);    return () => window.removeEventListener("keyup", handleKeyUp);  }}, [collapsed]);

addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

要在按钮上为click事件添加事件处理程序，可以使用下列代码：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function () {
    alert(this.id);
},false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：

在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：

var btn = document.getElementById("myBtn");
var handler = function () {
        alert(this.id);
    };
btn.addEventListener("click",handler,false);  //有效！

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

addEventListener()与removeEventListener()解析

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false（false- 默认），表示在冒泡阶段调用事件处理程序。

addEventListener的参数一共有三个，语法为：

下面是详解： 1、其中element是要绑定函数的对象。 2、type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。 3、listener当然就是绑定的函数了，记住不要跟括号 4、最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。

要在按钮上为click事件添加事件处理程序，可以使用下列代码：

rush:js;"> var btn = document.getElementById("myBtn"); btn.addEventListener("click",function () { alert(this.id); },false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

rush:js;"> var btn = document.getElementById("myBtn");

btn.addEventListener("click",false);
btn.addEventListener("click",function () {
alert("Hello World");
},false);

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；

移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的

匿名函数无法移除

，如下面的例子所示：

rush:js;"> var btn = document.getElementById("myBtn");

btn.addEventListener("click",function () {
alert(this.id);
},false);
btn.removeEventListener("click",function () { //无效！
alert(this.id);
},false);

var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false); btn.removeEventListener("click", function () { //无效！ alert(this.id); }, false);

var btn = document.getElementById("myBtn"); var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); //有效！

var clickFun = null; aa = function(){ clickFun = function(){ alert("1") } window.removeEventListener("click",clickFun,false) window.addEventListener("click",clickFun,false) } setInterval(function(){ aa() },2000)

var clickFun = null; aa = function(){ ！clickFun && （window.removeEventListener("click",clickFun,false)）； clickFun = function(){ alert("1") } window.addEventListener("click",clickFun,false) } setInterval(function(){ aa() },2000)

getEventListeners(window).scroll.forEach(({listener}) => { if (listener.toString().contains(''scrollTo'')) { window.removeEventListener(''scroll'',listener) || console.log(''not removed'') } })