Web API - day02

JS - DOM-事件基础

事件监听

什么是事件

在编程时系统内发生的动作或者发生的事情如：用户在网页上点击一个按钮

1649177113824

1649177973782

什么是事件监听

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件语法

<script>
元素.addEventListener("事件类型","处理函数");
        let btn1 = document.querySelector(".btn1");
        // btn1.addEventListener("事件类型","处理函数");
        //click 鼠标点击
        btn1.addEventListener('click',function() {
            alert("开始抽奖啦");
        })
</script>

1649178374737

事件三要素

事件源：那个dom元素被事件触发了，要获取dom元素
事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

注意

事件类型要加引号函数是点击之后再去执行，每次点击都会执行一次

<body>
    <!-- 以下两种方式都不推荐 了解即可-->
    <!-- <button onclick="console.log(123)" >点击</button> -->
    <!-- <button onclick="show()">点击</button> -->

    <button>点击</button>
    <script>
      // 1 获取dom元素
      let btn = document.querySelector('button');

      // 使用旧方式 L0 第一个版本的方式绑定点击事件  on+事件类型 = 匿名函数
      // on也可以是在 行内 绝对不推荐
      btn.onclick = function () {
        console.log('事件触发啦');
      };
      btn.onclick = function () {
        console.log('事件触发啦');
      };
      btn.onclick = function () {
        console.log('事件触发啦');
      };
      btn.onclick = function () {
        console.log('事件触发啦');
      };

      // addEventListener 对一个事件类型 绑定多个处理函数 
      // on+事件 对一个事件类型 只能绑定一个处理函数
      

      // btn.onclick = show;
      // function show() {
      //   console.log('show');
      // }

      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
    </script>

事件类型

1649178343193

鼠标事件

鼠标触发

click 鼠标点击 mouseenter/ mouseover 鼠标经过 mouseleave/ mouseout 鼠标离开

<script>
// 获取div元素
  let div = document.querySelector('div');
  let input = document.querySelector('input');

  // 绑定不同的事件
  // div.addEventListener("click",function () {
  //   console.log("click 鼠标点击事件");
  // })

  // 鼠标经过元素
  // div.addEventListener("mouseenter",function () {
  // console.log("mouseenter 鼠标经过");
  // })

  // 鼠标离开元素
  // div.addEventListener("mouseleave",function () {
  // console.log("mouseleave 鼠标离开");
  // })

  // 鼠标经过
  // div.addEventListener("mouseover",function () {
  //   console.log("mouseover 鼠标经过");
  // })

  // 鼠标离开
  // div.addEventListener("mouseout",function () {
  //   console.log("mouseout 离开");
  // })
</script>

焦点事件

表单获得光标

focus 获得焦点 blur 失去焦点

 <script>
 // 获取div元素
  let div = document.querySelector('div');
  let input = document.querySelector('input');
  // 获得焦点
  // input.addEventListener("focus",function () {
  //   console.log("输入框 获得焦点 ");
  //   document.body.style.backgroundColor='#000'
  // })

  // // 失去焦点 
  // input.addEventListener("blur",function () {
  //   console.log("输入框 失去焦点");
  //   document.body.style.backgroundColor='#fff'
  // })
</script>

键盘事件

键盘触发

Keydown 键盘按下触发 Keyup 键盘抬起触发

 <script>
 // 获取div元素
  let div = document.querySelector('div');
  let input = document.querySelector('input');
  // 键盘按下事件 div不行 表单可以 
  // 给body标签添加比较多
  // document.body.addEventListener("keydown",function () {
  // console.log("keydown 按下");
  // })

  // 键盘抬起
  // document.body.addEventListener("keyup",function () {
  //   console.log("keyup 抬起");
  // })
</script>

文本事件

表单输入触发

input用户输入事件

 <script>
 // 获取div元素
  let div = document.querySelector('div');
  let input = document.querySelector('input');
  //输入事件 输入框
  input.addEventListener("input",function () {
    console.log("只要你在我的输入框输入了内容，我就触发");
  })
</script>

1649178440700

 <script>
      /* 
      1 获取商品数组 
      2 遍历他们绑定点击事件
      3 事件触发了 判断当前的是否达到了全选的状态
      4 把 状态也设置到 全选按钮中
       */

      let checkList = document.querySelectorAll('.ck');
      let checkAll = document.querySelector('#checkAll');

      // 给每一个商品绑定点击事件
      for (let index = 0; index < checkList.length; index++) {
        checkList[index].addEventListener('click', function () {
          // 判断是否达到了全选 条件
          let checked = isAllChecked();
          // 设置全选按钮即可
          checkAll.checked=checked;
        });
      }

      // 函数来判断
      function isAllChecked() {
        // 1 存放选中的商品的数量
        let checkedNum = 0;
        // 2 商品数组做循环
        for (let index = 0; index < checkList.length; index++) {
          // 3  判断每一商品的选中状态
          if (checkList[index].checked) {
            checkedNum++;
          }
        }
        // 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
        if (checkedNum === checkList.length) {
          // console.log('全选');
          return true;
        } else {
          // console.log('不全选');
          return false;
        }
      }
    </script>

1649178450913

 <script>
    /* 
    1 获取全选按钮和 一组 商品复选按钮
    2 给全选按钮绑定点击事件
    3 给一组商品 绑定点击事件 
     */

    let checkAll = document.querySelector('#checkAll');

    let checkboxList = document.querySelectorAll('.ck');

    // 商品全选点击 功能
    checkAll.addEventListener('click', function () {
      for (let index = 0; index < checkboxList.length; index++) {
        checkboxList[index].checked = checkAll.checked;
      }
    });

    // 一组商品的 点击功能
    // 给每一个商品绑定点击事件
    for (let index = 0; index < checkboxList.length; index++) {
      checkboxList[index].addEventListener('click', function () {
        // 判断是否达到了全选 条件
        let checked = isAllChecked();
        // 设置全选按钮即可
        checkAll.checked = checked;
      });
    }

    // 函数来判断
    function isAllChecked() {
      // 1 存放选中的商品的数量
      let checkedNum = 0;
      // 2 商品数组做循环
      for (let index = 0; index < checkboxList.length; index++) {
        // 3  判断每一商品的选中状态
        if (checkboxList[index].checked) {
          checkedNum++;
        }
      }
      // 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
      if (checkedNum === checkboxList.length) {
        // console.log('全选');
        return true;
      } else {
        // console.log('不全选');
        return false;
      }
    }
  </script>