js: 添加事件监听addEventListener、移除事件监听removeEventListener

文档

• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener

语法

// 添加事件监听
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture=false]);


// 移除事件监听
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture=false]);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

示例

<button onclick="addClickEventListener()">添加事件监听</button>
<button onclick="removeClickEventListener()">移除事件监听</button>

<script>
  // 事件处理函数
  function handleEvent(event) {
    console.log(event)
  }

  // 添加事件监听
  function addClickEventListener() {
    console.log('addClickEventListener')
    document.addEventListener('click', handleEvent)
  }

  // 移除事件监听
  function removeClickEventListener() {
    console.log('removeClickEventListener')
    document.removeEventListener('click', handleEvent)
  }
</script>

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

在线Demo: https://mouday.github.io/front-end-demo/eventListener.html

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126548320