传统移除方式

  • 事件源.onclick = null

方法监听移除

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>移除事件</title>
  8.   </head>
  10.   <body>
  11.     <div>移除点击事件</div>
  12.     <script>
  13.       const div = document.querySelector('div')
  15.       function click() {
  16.         console.log('click')
  17.         div.removeEventListener('click', click)
  18.       }
  20.       /*
  21.        * removeEventListener(type, listener[, useCapture])
  22.        * @type: 事件类型字符串，如 click, mouseover(不带 on)
  23.        * @listener: 要移除的时间处理函数，不要带括号
  24.        * @useCapture: 布尔值，默认 false
  25.        */
  26.       div.addEventListener('click', click)
  28.       /* function click() {
  29.        *   console.log('小于 IE 9')
  30.        *   // detachEvent(eventNameWithOn, callback)
  31.        *   // @eventNameWithOn: 事件类型字符串，如 onclick, onmouseover
  32.        *   // @callback: 事件处理函数，事件发生时，回调函数被调用
  33.        *   div.detachEvent('onclick', click)
  34.        * }
  35.        */
  36.       // div.attachEvent('onclick', click)
  37.     </script>
  38.   </body>
  39. </html>