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