API-事件监听

最新推荐文章于 2024-07-06 16:47:02 发布

雪碧bibi是我的好大二

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量497

点赞数 9

分类专栏： Web API 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_64105917/article/details/139902710

版权

Web API 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

学习目标：

掌握事件监听

学习内容：

事件监听
拓展阅读-事件监听版本

事件监听：

什么是事件？
事件是在编程时系统内发生的动作或者发生的事情。
```
 比如用户在网页上单击一个按钮。
```
什么是事件监听？
就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。
```
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。
```
事件监听语法

元素对象.addEventListener('事件类型',要执行的函数）

事件监听三要素

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

<title>事件监听</title>
</head>

<body>
  <button>按钮</button>
  <script>
    //需求：点击了按钮，弹出一个对话框
    //1.事件源：  按钮 
    //2.事件类型  点击鼠标  click 字符串
    const btn = document.querySelector('button')
    //3.事件处理程序  弹出对话框
    btn.addEventListener('click', function () {
      alert('点击了~')
    })
  </script>

</body>

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

练习

<title>练习-京东点击关闭顶部广告</title>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    //1.获取事件源
    const box1 = document.querySelector('.box1')
    //关闭的是大盒子
    const box = document.querySelector('.box')
    //2.事件监听
    box1.addEventListener('click', function () {
      box.style.display = 'none'
    })

  </script>

</body>

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-随机点名案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    h2 {
      text-align: center;
    }

    .box {
      width: 600px;
      margin: 50px auto;
      display: flex;
      font-size: 25px;
      line-height: 40px;
    }

    .qs {

      width: 450px;
      height: 40px;
      color: red;

    }

    .btns {
      text-align: center;
    }

    .btns button {
      width: 120px;
      height: 35px;
      margin: 0 50px;
    }
  </style>
</head>

<body>
  <h2>随机点名</h2>
  <div class="box">
    <span>名字是：</span>
    <div class="qs">这里显示名字</div>
  </div>
  <div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
  </div>
  <script>
    // 数组输出
    const arr = ['雪碧', '丸子', '妮妮', '源哥', '罐头']
    //定时器的全局变量
    let timerId = 0
    //随机号要全局变量
    let random = 0
    // 业务1 ：开始按钮模块
    const qs = document.querySelector('.qs')
    // 1.1获取开始按钮对象
    const start = document.querySelector('.start')
    //1.2添加点击事件
    start.addEventListener('click', function () {
      timerId = setInterval(function () {
        //随机数
        random = parseInt(Math.random() * arr.length)
        // console.log(arr[random])
        qs.innerHTML = arr[random]
      }, 35)

      // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
      if (arr.length === 1) {
        // start.disabled = true
        // end.disabled = true
        start.disabled = end.disabled = true
      }
    })

    //2.关闭按钮模块
    const end = document.querySelector('.end')
    end.addEventListener('click', function () {
      clearInterval(timerId)
      // 结束了，可以删除掉当前抽取的那个数组元素
      arr.splice(random, 1)
      console.log(arr)
    })
  </script>

</body>

</html>

拓展阅读-事件监听版本：

DOM L0

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

 <title>事件监听版本</title>
</head>

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.onclick = function () {
      alert(11)
    }
    btn.onclick = function () {
      alert(22)
    }

  </script>

</body>

注意：on方式会被覆盖。

DOM L2

事件源.addEventListener(事件,事件处理函数）

 <title>事件监听版本</title>
</head>

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button'）
    btn.addEventListener('click', function () {
      alert(11)
    })
    btn.addEventListener('click', function () {
      alert(22)
    })

  </script>

</body>

注意：addEventListener方式可绑定多次，拥有事件更多特性，推荐使用。

发展史

DOM L0	是DOM的发展的第一个版本；L:level
DOM L1	DOM级别1于1998年10月1日成为 W3C推荐标准
DOM L2	使用`addEventListener`注册事件
DOM L3	DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型