删除事件（解绑事件）/ 删除事件兼容性解决方案

最新推荐文章于 2022-11-25 10:39:36 发布

杨蛋蛋~R

最新推荐文章于 2022-11-25 10:39:36 发布

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108913946

版权

javascript 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

删除事件（解绑事件）

传统注册方式：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;
  }
}