Web API第二天学习总结

DOM-事件基础

事件监听

什么是事件

在编程时系统内发生的动作或者发生的事情

如：用户在网页上点击一个按钮

什么是事件监听

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

语法

元素.addEventListener("事件类型","处理函数");

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

事件三要素

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

注意

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

事件类型

鼠标事件

鼠标触发

1. click 鼠标点击
2. mouseenter/ mouseover 鼠标经过
3. mouseleave/ mouseout 鼠标离开

      // 获取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 离开");
      // })

焦点事件

表单获得光标

1. focus 获得焦点
2. blur 失去焦点

      // 获取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'
      // })

键盘事件

键盘触发

1. Keydown 键盘按下触发
2. Keyup 键盘抬起触发

      // 获取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 抬起");
      // })

文本事件

表单输入触发

1. input用户输入事件

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