刪除事件（解綁事件）/ 刪除事件相容性解決方案

楊蛋蛋~R發表於2020-10-03
事件

刪除事件（解綁事件）

  • 傳統註冊方式：element.onclick = 'null'
  • removeEventListener刪除事件
  • attachEvent刪除事件
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      var divs = document.querySelectorAll("div");
      divs[0].onclick = function () {
        alert(11);
        //傳統方式刪除事件
        divs[0].onclick = "null"; //彈出一次對話方塊後就解綁
      };
      
      //2.removeEventListener刪除事件
      divs[1].addEventListener("click", fn()); //裡面的fn  不需要呼叫加小括號
      //解綁
      function fn() {
        alert(22);
        divs[1].removeEventListener("click", fn);
      }
      
      //3.attachEvent刪除事件
      divs[2].attachEvent("onclick", fn1);
      //解綁
      function fn1() {
        alert(33);
        divs[2].detachEvent("onclick", fn1);
      }

刪除事件相容性解決方案

// 處理移除事件的相容性處理
function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

相關文章