Web Apls第二天

1.事件

1.事件介绍

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

②比如点击按钮 click

2.事件监听介绍

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

3.语法

元素.addEventListener('事件', 要执行的函数)

2.事件监听三要素

1.事件源

①哪个dom元素被事件触发了，要获取dom元素

2.事件

①用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover

3.事件调用的函数

①要做什么事

4.注意：

1.事件类型要加引号

2.函数是点击之后再去执行，每次点击都会执行一次

5.事件案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-事件初体验.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        height: 300px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <button class="btn1">抽奖</button>
    <button class="btn2">退出抽奖</button>
    <div></div>
    <script>
      /* 
      触发事件dom元素
      事件类型
      事件触发了 做业务 函数
       */

      let btn1 = document.querySelector('.btn1');

      // 注册事件
      // btn1.addEventListener("事件类型","处理函数")

      // click 鼠标单击
      btn1.addEventListener('click', function () {
        console.log('开始抽奖啦');
      });

      let btn2 = document.querySelector('.btn2');
      btn2.addEventListener('click', function () {
        console.log('退出抽奖啦');
      });

      let div = document.querySelector('div');
      // mouseover  鼠标移入到 div 的区域内
      div.addEventListener('mouseover', function () {
        console.log('小哥快点进来');
      });
    </script>
  </body>
</html>

3.拓展-事件监听

1.DOM L0

①事件源.on事件 = function() { }

2.DOM L2

①事件源.addEventListener(事件，事件处理函数)

3.发展史

①DOM L0 ：是 DOM 的发展的第一个版本； L：level

②DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准

③DOM L2：使用addEventListener注册事件

④DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

4.事件类型

1.鼠标事件

①(鼠标触发)

②click 鼠标点击

③mouseenter 鼠标经过

④mouseleave 鼠标离开

2.焦点事件

①(表单获得光标)

②focus (获得焦点 )

③blur (失去焦点)

3.键盘事件

①(键盘触发 )

②Keydown( 键盘按下触发 )

③Keyup (键盘抬起触发)

4.文本事件

①input( 用户输入事件)