ThatManK Mobile Article

移除事件

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
      var divs = document.querySelectorAll("div");

      divs[0].onclick = function () {
        alert(11);
        // 1. 传统方式删除事件
        divs[0].onclick = null;
      };

      // 2. removeEventListener 删除事件
      divs[1].addEventListener("click", fn); // 里面的fn 不需要调用加小括号
      function fn() {
        alert(22);
        divs[1].removeEventListener("click", fn);
      }

      // 3. detachEvent
      divs[2].attachEvent("onclick", fn1);
      function fn1() {
        alert(33);
        divs[2].detachEvent("onclick", fn1);
      }
    </script>
  </body>
</html>