jquery 解绑 onclick js解绑click事件

/*
              事件三要素
              1、事件源：在谁的身上绑定事件
              2、事件类型：什么事件
              3、事件处理函数：当行为发生的时候，执行那一个函数
              ==>div.οnclick=function(){}
              ==>div:事件源（绑定在div身上的事件）
              ==>click：事件类型
              ==>function(){}:事件处理函数，当行为发生的时候，执行这个函数
              事件绑定分类
              1、dom0级事件
              ==>on...  形式
              2、dom2级事件
              ==>事件监听
              2-1、addEventListener()
              ==>标准浏览器使用
              ==>语法：事件源.addEventListener('事件类型',事件处理函数，false监听冒泡 true监听捕获)
              ==>第三个参数不写，默认是冒泡
              ==>重复添加不会覆盖(事件队列) 两个函数都指向一个地址，但不是同一个函数
              ==>可以给一个事件类型绑定多个事件处理函数
              ==>多个事件处理函数的时候，顺序绑定顺序执行
              ==>至少两个参数
              2-2、attachEvent()
              ==>IE低版本使用
              ==>语法：事件源.attachEvent('on事件类型',事件处理函数)
              ==>可以同时给一个事件类型绑定多个事件处理函数
              ==>多个事件处理函数的时候，顺序绑定倒叙执行(后绑定先执行)
              ==>只有两个参数
             
              */
      //   2-1、addEventListener()
      /*     var div = document.querySelector("div");
      div.addEventListener("click", function () {
        console.log(1);
      });
      div.addEventListener("click", function () {
        console.log(2);
      }); */
      // 2-2、attachEvent()
      // ==>IE低版本使用
      /*      var div = document.getElementById("box");
      div.attachEvent("onclick", function () {
        document.log(3);
      });
      div.attachEvent("onclick", function () {
        document.log(4);
      }); */
      /*
      事件的解绑
      1、解绑dom0级事件
      ==>直接赋值为null
    2、解绑dom2级事件
     2-1 removeEventListener('事件类型',要解绑的事件处理函数)
    ==>**注意**如果解绑事件，在绑定事件的时候，一定要把函数单独书写
    写成一个具名函数的形式，以函数名的形式解绑事件处理函数
    2-2、detachEvent('on事件类型',要解绑的事件处理函数)
      ==>**注意**如果解绑事件，在绑定事件的时候，一定要把函数单独书写
    写成一个具名函数的形式，以函数名的形式解绑事件处理函数
     
      */
      var btn = document.getElementById("btn");
      var div = document.getElementById("box");
      /*   //绑定事件
      div.onclick = function () {
        console.log("123");
      };
      //解绑
      btn.onclick = function () {
        div.onclick = null;
      }; */
      // 2、绑定事件
      /*      向一个事件类型身上绑定多个事件处理函数的时候
     click:[事件处理函数1,事件处理函数2,事件处理函数3,...]
     当行为触发的时候，找到相对应的这个数组，循环遍历依次执行
     当你解绑的时候，就会循环遍历，依次去比较，找到一个一样的，splice() */
      //无法解绑
      /*  div.addEventListener("click", function a() {
        console.log(111);
      });
      btn.onclick = function () { */
      /*
        给div解绑dom2级事件
        在解绑的时候，传递进去一个叫a的函数
        要找到div身上有没有绑定一个叫做a的函数，发现没有，解绑不掉
        */
      /*   div.removeEventListener("click", function a() {
          console.log(12);
        });
        console.log("代码已执行");
      }; */
      //解绑：
      //准备事件处理函数
      /*      function clickHandler() {
        console.log(123);
      }
      //绑定
      //clickHandler()表示把函数执行
      //clickHandler 表示一个函数的地址
      div.addEventListener("click", clickHandler);
      //解绑
      btn.onclick = function () {
        div.removeEventListener("click", clickHandler);
      };
      //IE低版本
      function clickHandler() {
        console.log(123);
      }
      div.attachEvent("onclick", clickHandler);
      //解绑
      btn.onclick = function () {
        div.detachEvent("click", clickHandler);
        console.log("执行");
      }; */
      /*
      封装事件绑定和解绑
      ==>兼容问题
      ==>使用方便
      ==>封装需要参数
      ->事件源，事件类型，事件处理函数
     
      */