[已解决]怎么通过removeEventListener删除事件

Sorawithcat

我在进行以下操作后并没有删除事件
showTagCode（）
showTagCode（false）

1. /**
   
2. *  使所有元素在悬停时显示元素的原始 HTML 代码
   
3. *  @param {boolean} boolean - 布尔值，如果为true则运行添加动作，如果为false则删除动作，默认为true
   
4. * */
   
5. function showTagCode(boolean = true) {
   
6.     const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素
   
7.     if (boolean) {
   
8.         for (let i = 0; i < elements.length; i++) {
   
9.             const element = elements[i];
   
10.             function a() {
    
11.                 element.title = element.outerHTML;
    
12.             }
    
13.             function b() {
    
14.                 element.title = ""
    
15.             }
    
16. 
    
17.             element.addEventListener("mouseover", a)
    
18.             element.addEventListener("mouseout", b)
    
19.         }
    
20.     } else {
    
21. 
    
22.         removeEventListener("mouseover", a)
    
23.         removeEventListener("mouseout", b)
    
24. 
    
25.     }
    
26. }

复制代码

最佳答案

月排行榜 / 总排行榜

FishC

2024-2-12 09:23:01

在删除事件监听器时，需要使用具体的函数引用来指定要删除的事件处理程序。在你的代码中，事件处理程序是通过函数表达式定义的，因此在`showTagCode`函数之外无法访问它们。为了能够正确删除事件监听器，你可以将这两个事件处理程序定义为全局变量，或者将它们作为参数传递给`showTagCode`函数。

以下是一种修改后的方法，其中将事件处理程序定义为全局变量：

1. // 全局变量，用于存储事件处理程序
   
2. let a, b;
   
3. 
   
4. /**
   
5. * 使所有元素在悬停时显示元素的原始 HTML 代码
   
6. * @param {boolean} boolean - 布尔值，如果为true则运行添加动作，如果为false则删除动作，默认为true
   
7. */
   
8. function showTagCode(boolean = true) {
   
9.   const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素
   
10. 
    
11.   if (boolean) {
    
12.     // 添加事件监听器
    
13.     a = function() {
    
14.       this.title = this.outerHTML;
    
15.     };
    
16.     b = function() {
    
17.       this.title = "";
    
18.     };
    
19. 
    
20.     for (let i = 0; i < elements.length; i++) {
    
21.       const element = elements[i];
    
22.       element.addEventListener("mouseover", a);
    
23.       element.addEventListener("mouseout", b);
    
24.     }
    
25.   } else {
    
26.     // 删除事件监听器
    
27.     for (let i = 0; i < elements.length; i++) {
    
28.       const element = elements[i];
    
29.       element.removeEventListener("mouseover", a);
    
30.       element.removeEventListener("mouseout", b);
    
31.     }
    
32.   }
    
33. }
    
34. 
    
35. // 使用示例
    
36. showTagCode(); // 添加事件监听器
    
37. showTagCode(false); // 删除事件监听器

复制代码

在这个修改过的代码中，`a`和`b`是全局变量，它们被用作事件处理程序。当调用`showTagCode`函数时，根据布尔值参数来添加或删除事件监听器。在添加事件监听器时，`a`和`b`函数被添加到每个元素上，而在删除事件监听器时，`removeEventListener`函数使用相同的函数引用来删除事件监听器。

希望这可以解决你的问题！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

在删除事件监听器时，需要使用具体的函数引用来指定要删除的事件处理程序。在你的代码中，事件处理程序是通过函数表达式定义的，因此在`showTagCode`函数之外无法访问它们。为了能够正确删除事件监听器，你可以将这两个事件处理程序定义为全局变量，或者将它们作为参数传递给`showTagCode`函数。

以下是一种修改后的方法，其中将事件处理程序定义为全局变量：

1. // 全局变量，用于存储事件处理程序
   
2. let a, b;
   
3. 
   
4. /**
   
5. * 使所有元素在悬停时显示元素的原始 HTML 代码
   
6. * @param {boolean} boolean - 布尔值，如果为true则运行添加动作，如果为false则删除动作，默认为true
   
7. */
   
8. function showTagCode(boolean = true) {
   
9.   const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素
   
10. 
    
11.   if (boolean) {
    
12.     // 添加事件监听器
    
13.     a = function() {
    
14.       this.title = this.outerHTML;
    
15.     };
    
16.     b = function() {
    
17.       this.title = "";
    
18.     };
    
19. 
    
20.     for (let i = 0; i < elements.length; i++) {
    
21.       const element = elements[i];
    
22.       element.addEventListener("mouseover", a);
    
23.       element.addEventListener("mouseout", b);
    
24.     }
    
25.   } else {
    
26.     // 删除事件监听器
    
27.     for (let i = 0; i < elements.length; i++) {
    
28.       const element = elements[i];
    
29.       element.removeEventListener("mouseover", a);
    
30.       element.removeEventListener("mouseout", b);
    
31.     }
    
32.   }
    
33. }
    
34. 
    
35. // 使用示例
    
36. showTagCode(); // 添加事件监听器
    
37. showTagCode(false); // 删除事件监听器

复制代码

在这个修改过的代码中，`a`和`b`是全局变量，它们被用作事件处理程序。当调用`showTagCode`函数时，根据布尔值参数来添加或删除事件监听器。在添加事件监听器时，`a`和`b`函数被添加到每个元素上，而在删除事件监听器时，`removeEventListener`函数使用相同的函数引用来删除事件监听器。

希望这可以解决你的问题！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:23
在删除事件监听器时，需要使用具体的函数引用来指定要删除的事件处理程序。在你的代码中，事件处理程序是通 ...

那么怎么不定义全局变量来实现这个效果呢

FishC

Sorawithcat 发表于 2024-02-12 09:27
那么怎么不定义全局变量来实现这个效果呢

如果你不希望定义全局变量，你可以将事件处理程序作为参数传递给`showTagCode`函数。这样，在添加和删除事件监听器时，可以使用相同的事件处理程序引用。以下是修改后的代码示例：/** * 使所有元素在悬停时显示元素的原始 HTML 代码 * @param {boolean} boolean - 布尔值，如果为 true 则运行添加动作，如果为 false 则删除动作，默认为 true */function showTagCode(boolean = true) {  const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素  const a = function() {    this.title = this.outerHTML;  };  const b = function() {    this.title = "";  };  if (boolean) {    // 添加事件监听器    for (let i = 0; i < elements.length; i++) {      const element = elements;      element.addEventListener("mouseover", a);      element.addEventListener("mouseout", b);    }  } else {    // 删除事件监听器    for (let i = 0; i < elements.length; i++) {      const element = elements;      element.removeEventListener("mouseover", a);      element.removeEventListener("mouseout", b);    }  }}// 使用示例showTagCode(); // 添加事件监听器showTagCode(false); // 删除事件监听器在这个修改过的代码中，`a`和`b`作为常量在`showTagCode`函数内部定义。在添加和删除事件监听器时，使用这两个函数引用即可。注意，在循环中访问`elements`数组时，需要使用正确的索引值来获取每个元素。这样，就可以避免将函数引用定义为全局变量。希望这对你有所帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:27
如果你不希望定义全局变量，你可以将事件处理程序作为参数传递给`showTagCode`函数。这样，在添加和删 ...

这样只能添加，不能删除

FishC

Sorawithcat 发表于 2024-02-12 09:31
这样只能添加，不能删除

非常抱歉，我之前的回答有误。正确的方法是将事件处理程序绑定到每个元素上时，使用`addEventListener`传入匿名函数，并在删除事件监听器时，也需要传入相同的匿名函数来移除事件监听器。

以下是修改后的代码示例：

1. /**
   
2. * 使所有元素在悬停时显示元素的原始 HTML 代码
   
3. * @param {boolean} boolean - 布尔值，如果为 true 则运行添加动作，如果为 false 则删除动作，默认为 true
   
4. */
   
5. function showTagCode(boolean = true) {
   
6.   const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素
   
7. 
   
8.   const a = function() {
   
9.     this.title = this.outerHTML;
   
10.   };
    
11. 
    
12.   const b = function() {
    
13.     this.title = "";
    
14.   };
    
15. 
    
16.   if (boolean) {
    
17.     // 添加事件监听器
    
18.     for (let i = 0; i < elements.length; i++) {
    
19.       const element = elements[i];
    
20.       element.addEventListener("mouseover", a);
    
21.       element.addEventListener("mouseout", b);
    
22.     }
    
23.   } else {
    
24.     // 删除事件监听器
    
25.     for (let i = 0; i < elements.length; i++) {
    
26.       const element = elements[i];
    
27.       element.removeEventListener("mouseover", a);
    
28.       element.removeEventListener("mouseout", b);
    
29.     }
    
30.   }
    
31. }
    
32. 
    
33. // 使用示例
    
34. showTagCode(); // 添加事件监听器
    
35. showTagCode(false); // 删除事件监听器

复制代码

在这个修改过的代码中，我们将匿名函数赋值给了变量`a`和`b`，并在相应的位置使用了这些变量。这样，在删除事件监听器时，我们可以传入相同的匿名函数来移除事件监听器。

再次对之前给出的错误回答表示抱歉，希望这次的回答能够解决你的问题。谢谢你的耐心！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:31
非常抱歉，我之前的回答有误。正确的方法是将事件处理程序绑定到每个元素上时，使用`addEventListener` ...

还是无法删除，这不是和上个代码一样么

FishC

Sorawithcat 发表于 2024-02-12 09:51
还是无法删除，这不是和上个代码一样么

非常抱歉，我之前的回答仍然有误。由于你在添加事件监听器时使用了循环，因此在删除事件监听器时也需要相同的循环来逐个删除。以下是修改后的代码示例：// 全局变量，用于存储事件处理程序let a, b;/** * 使所有元素在悬停时显示元素的原始 HTML 代码 * @param {boolean} boolean - 布尔值，如果为true则运行添加动作，如果为false则删除动作，默认为true */function showTagCode(boolean = true) {  const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素  if (boolean) {    // 添加事件监听器    a = function() {      this.title = this.outerHTML;    };    b = function() {      this.title = "";    };    for (let i = 0; i < elements.length; i++) {      const element = elements;      element.addEventListener("mouseover", a);      element.addEventListener("mouseout", b);    }  } else {    // 删除事件监听器    for (let i = 0; i < elements.length; i++) {      const element = elements;      element.removeEventListener("mouseover", a);      element.removeEventListener("mouseout", b);    }  }}// 使用示例showTagCode(); // 添加事件监听器showTagCode(false); // 删除事件监听器在这个修改过的代码中，我们使用`elements`来获取每个元素，并在循环中分别添加或删除相应的事件监听器。希望这次的回答能够解决你的问题，对之前给出的错误回答再次表示诚挚的道歉。非常感谢你的耐心！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:51
非常抱歉，我之前的回答仍然有误。由于你在添加事件监听器时使用了循环，因此在删除事件监听器时也需要 ...

错了

FishC

Sorawithcat 发表于 2024-02-12 09:51
错了

非常抱歉，我之前的回答仍然有误。确实，在删除事件监听器时，需要将具体的函数引用传递给`removeEventListener`方法。在你的代码中，由于函数表达式定义的事件处理程序无法在函数之外访问，因此你需要使用其他方法来删除事件监听器。

一种可行的方法是使用闭包。将事件处理程序定义为闭包内的函数，并返回该函数的引用。然后，在删除事件监听器时，可以使用返回的函数引用来调用`removeEventListener`方法。

以下是修改后的代码示例：

1. function showTagCode(boolean = true) {
   
2.   const elements = document.body.getElementsByTagName("*");
   
3. 
   
4.   if (boolean) {
   
5.     for (let i = 0; i < elements.length; i++) {
   
6.       const element = elements[i];
   
7. 
   
8.       const a = function() {
   
9.         element.title = element.outerHTML;
   
10.       }
    
11. 
    
12.       const b = function() {
    
13.         element.title = "";
    
14.       }
    
15. 
    
16.       element.addEventListener("mouseover", a);
    
17.       element.addEventListener("mouseout", b);
    
18.     }
    
19.   } else {
    
20.     for (let i = 0; i < elements.length; i++) {
    
21.       const element = elements[i];
    
22. 
    
23.       const a = function() {
    
24.         element.title = element.outerHTML;
    
25.       }
    
26. 
    
27.       const b = function() {
    
28.         element.title = "";
    
29.       }
    
30. 
    
31.       element.removeEventListener("mouseover", a);
    
32.       element.removeEventListener("mouseout", b);
    
33.     }
    
34.   }
    
35. }
    
36. 
    
37. // 使用示例
    
38. showTagCode(); // 添加事件监听器
    
39. showTagCode(false); // 删除事件监听器

复制代码

在这个修改过的代码中，我们在`showTagCode`函数内部定义了`a`和`b`函数，并将它们用作事件处理程序。然后，在添加和删除事件监听器时，我们使用了相同的函数引用。这样，就可以正确地删除相应的事件监听器。

非常抱歉之前给出了错误的回答，希望这次的回答能够解决你的问题。非常感谢你的耐心！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:52
非常抱歉，我之前的回答仍然有误。确实，在删除事件监听器时，需要将具体的函数引用传递给`removeEvent ...

还是无法删除

FishC

Sorawithcat 发表于 2024-02-12 09:53
还是无法删除

非常抱歉再次给您带来困惑。根据您的代码逻辑，您遍历了所有元素，并为每个元素添加了两个事件监听器。但是在删除事件监听器时，您只是在遍历元素，而没有指定要删除哪个具体的事件监听器。因此，`removeEventListener`方法无法正确删除事件监听器。

为了解决这个问题，您可以使用一种更可行的方法，即将事件处理程序作为参数传递给`showTagCode`函数，并在删除事件监听器时使用相同的参数来移除它们。以下是修改后的代码示例：

1. function showTagCode(boolean = true, handlerA, handlerB) {
   
2.   const elements = document.body.getElementsByTagName("*");
   
3. 
   
4.   if (boolean) {
   
5.     for (let i = 0; i < elements.length; i++) {
   
6.       const element = elements[i];
   
7. 
   
8.       const a = function () {
   
9.         element.title = element.outerHTML;
   
10.       }
    
11.       const b = function () {
    
12.         element.title = "";
    
13.       }
    
14. 
    
15.       element.addEventListener("mouseover", a);
    
16.       element.addEventListener("mouseout", b);
    
17. 
    
18.       if (handlerA && handlerB) {
    
19.         handlerA.push(a);
    
20.         handlerB.push(b);
    
21.       }
    
22.     }
    
23.   } else {
    
24.     if (handlerA && handlerB) {
    
25.       for (let i = 0; i < elements.length; i++) {
    
26.         const element = elements[i];
    
27.         const a = handlerA[i];
    
28.         const b = handlerB[i];
    
29. 
    
30.         element.removeEventListener("mouseover", a);
    
31.         element.removeEventListener("mouseout", b);
    
32.       }
    
33. 
    
34.       // 清空处理程序数组
    
35.       handlerA.length = 0;
    
36.       handlerB.length = 0;
    
37.     }
    
38.   }
    
39. }
    
40. 
    
41. // 使用示例
    
42. let handlerA = []; // 存储mouseover事件处理程序的数组
    
43. let handlerB = []; // 存储mouseout事件处理程序的数组
    
44. 
    
45. showTagCode(true, handlerA, handlerB); // 添加事件监听器
    
46. showTagCode(false, handlerA, handlerB); // 删除事件监听器

复制代码

在这个修正后的代码中，我们新增了两个参数`handlerA`和`handlerB`来传递事件处理程序的引用。在添加事件监听器时，我们将每个事件处理程序存储到对应的数组`handlerA`和`handlerB`中。而在删除事件监听器时，我们使用相同的数组来遍历元素并移除对应的事件监听器。

希望这次的回答能够解决您的问题。非常感谢您的耐心！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-12 09:53
非常抱歉再次给您带来困惑。根据您的代码逻辑，您遍历了所有元素，并为每个元素添加了两个事件监听器。 ...

不能不定义全局变量，不传其他参数?

FishC

Sorawithcat 发表于 2024-02-12 09:56
不能不定义全局变量，不传其他参数?

当您不想使用全局变量或传递其他参数时，您可以考虑使用闭包来实现。闭包能够在函数内部创建私有变量，从而避免使用全局变量，并且不需要传递额外的参数。以下是修改后的代码示例：function showTagCode(boolean = true) {  const elements = document.body.getElementsByTagName("*");  if (boolean) {    for (let i = 0; i < elements.length; i++) {      const element = elements;      const a = function () {        element.title = element.outerHTML;      }      const b = function () {        element.title = "";      }      element.addEventListener("mouseover", a);      element.addEventListener("mouseout", b);      // 在闭包中定义删除事件监听器的函数      const removeEventListeners = function() {        element.removeEventListener("mouseover", a);        element.removeEventListener("mouseout", b);        // 在执行完删除操作后，将闭包函数自身从元素的事件监听器中移除        element.removeEventListener("click", removeEventListeners);      }      // 在元素上添加一个事件监听器，以便在需要时调用闭包函数      element.addEventListener("click", removeEventListeners);    }  }}// 使用示例showTagCode(); // 添加事件监听器这个修改过的代码通过使用闭包，在每个元素上动态地添加了一个点击事件监听器 `removeEventListeners` 。当单击元素时，该监听器会调用闭包函数，并在函数内部删除相关的事件监听器。在闭包函数执行完删除操作后，还会自动从元素的点击事件监听器中移除自身，以避免干扰其他元素。希望这个方法符合您的要求！如果还有任何疑问，请随时追问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。