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

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

httpkaidi

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

阅读量90

点赞数

分类专栏： javascript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121617571

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

删除事件（解绑事件）

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

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
删除事件（解绑事件）/ 删除事件兼容性解决方案

删除事件（解绑事件）传统注册方式：element.onclick = 'null' removeEventListener删除事件 attachEvent删除事件 <body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll("div")
复制链接

扫一扫

专栏目录