JS事件的绑定和解绑

 /*

              事件三要素

              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("执行");

      }; */

      /*

      封装事件绑定和解绑

      ==>兼容问题

      ==>使用方便

      ==>封装需要参数

      ->事件源，事件类型，事件处理函数

     

      */