Web API —— DOM 学习（二）

COLDEHY

已于 2024-03-21 21:06:50 修改

阅读量307

点赞数

文章标签：学习 javascript 前端 html5 java

于 2024-03-20 22:05:59 首次发布

本文链接：https://blog.csdn.net/qq_63342197/article/details/136862418

版权

本文详细介绍了JavaScript中的定时器-间歇函数的使用，包括开启和关闭定时器，以及事件的监听、类型（如鼠标、焦点、键盘事件）、事件对象的获取和常用属性。同时讲解了回调函数的概念及其在事件处理中的应用，还通过实例展示了如何使用这些技术进行实际操作，如倒计时、随机问题、Tab栏切换和复选框全选。

摘要由CSDN通过智能技术生成

一、定时器-间歇函数

每隔一段时间就自动执行一段代码，页面中的倒计时经常用，计时器能开启也能关闭

（一）开启定时器

一旦开启永不停歇

setinterval(函数，间隔时间) 时间默认是毫秒先等待再计时，返回值是计时器的序号

1 s = 1000 毫秒

如果想用一个没名的函数使用计时器，可以使用匿名函数

<body>
  <script>
    setInterval(function () {
      console.log('一秒执行一次')
    }, 1000)
  </script>
</body>

如果用有名的函数，使用 setInterval() 函数时里面的函数不用加括号

也有加小括号的情况但是极为少见，加上小括号后必须在函数外侧拿 ‘‘ 引上不重要

<body>
  <script>
    function fn() {
      console.log('一秒执行一次')
    }
    setInterval(fn, 1000)
  </script>
</body>

（一）关闭定时器

每个计时器都有独一无二的序号，我们拿到这个序号就能关闭计时器

获得它的序号然后 clearInterval(n) 就行了

<body>
  <script>
    function fn() {
      console.log('一秒执行一次')
    }
    let n = setInterval(fn, 1000)
    console.log(n)
    clearInterval(n)
  </script>
</body>

小练习：用户协议倒计时

界面展示：

代码部分：

<body>
  <textarea name="" id="" cols="30" rows="10">
    用户注册协议
  </textarea>
  <br>
  <button class="btn" disabled>我已阅读用户协议（10）</button>
  <script>
    const btn = document.querySelector('button')
    let i = 10
    let n = setInterval(function () {
      i--
      btn.innerHTML = `我已阅读用户协议（${i}）`
      if (i === 0) {
        clearInterval(n)
        btn.disabled = false
        btn.innerHTML = `同意`
      }
    }, 1000)
  </script>
</body>

二、事件

（一）事件监听

事件：系统发生的动作或者是用户发生的动作例如：用户点击按钮

事件监听：一旦发生一个事件，就立即调用一个函数去响应也叫做绑定事件或者注册事件，比如点击播放轮播图。点击出现下拉菜单等。

语法：元素对象.addEventListener('事件类型'，要执行的函数){

}

事件源：被监听的 dom 元素

事件类型：用什么方式触发，比如鼠标点击鼠标经过等

事件调用的函数：做什么事

注意：监听里面的变量是局部变量要声明为全局变量才能关闭定时器，可以看看下面小练习中的n变量。

<body>
  <button>我是一个按钮</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你在点击')
    })
  </script>
</body>

（二）事件类型

1.鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

<body>
  <div class="box">
  </div>
  <script>
    const box = document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
      alert('hhh')
    })
  </script>

2.焦点事件（光标事件）

focus 获得焦点：获得光标时触发

blur 失去焦点

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      console.log('有焦点触发')
    })
    input.addEventListener('blur', function () {
      console.log('触发结束')
    })
  </script>
</body>

3.键盘事件

Keydown 键盘按下触发

Keyup 键盘抬起触发

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('keydown', function () {
      console.log('键盘按下')
    })
    input.addEventListener('keyup', function () {
      console.log('键盘弹起')
    })
  </script>
</body>

4.文本事件：

用户输入内容触发：可以获取用户输入内容 input.value

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('input', function () {
      console.log(input.value)
    })
  </script>
</body>

（三）事件对象

也是一个对象，有事件触发时的相关信息比如鼠标点击事件中，

事件对象存储了鼠标点在哪个位置或者用户输入了哪个键。

可以强制用户只能用哪个按键进行我们规定的操作，比如只能空格提交评论等。

1.获取事件对象

一般命名为 event ev e 事件绑定的回调函数第一个参数就是事件对象

注意 e 的位置看下面代码就知道它在函数中的位置了，

事件绑定的回调函数第一个参数就是事件对象

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      console.log(e)
    })
  </script>
</body>

2.事件对象常用属性

type ：获取当前的事件类型

clientX / clientY : 获取光标相对于浏览器窗口左上角的位置

offsetX / offsetY : 获取光标相对于当前 DOM 元素左上角的位置

key ：用户按下单键盘键的值不提倡用 keycode（已废弃）

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('keyup', function (e) {
     if(e.key === 'Enter'){
      console.log('我按下了回车键')
     }
    })
  </script>
</body>

去除字符串左右两侧的空格

str.trim()

（四）环境对象

函数内部特殊的变量 this 代表着当前函数运行时所处的环境

弄清楚 this 的指向能使代码更整洁

每个函数里都有 this 环境对象

下面的对象 this 是 window ，普通函数中 this 指向的都是 window

<body>
  <button>点击</button>
  <script>
    function fn() {
      console.log(this)
    }
    window.fn()
  </script>
</body>

下面 console.log 返回值是 btn 对象由此看出 this 指向的其实是函数的调用者

谁调用 this 就是谁

最下面的语句就让 btn 里面的文字颜色就变成了红色

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
    console.log(btn)
    this.style.color = 'red'
    })
  </script>
</body>

（五）回调函数

如果将函数 A 作为参数传递给函数 B 时，我们称函数 A 为回调函数。

下面代码函数 fn() 作为计时器的一个参数，进行调用，则被调用的 fn() 函数就被成为回调函数。

回 tiao 函数不是回 diao 函数是回头调用的意思

<body>
  <script>
   function fn(){
    console.log('我是回调函数')
   }
   setInterval(fn, 1000)
  </script>
</body>

练习：随机取问题

界面展示：

代码部分：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <h3>随机问答</h3>
    <h4>问题是：<span>怎么写字</span></h4>
    <div>
      <button class="begin">开始</button>
      <button class="end">结束</button>
    </div>
  </div>
  <script>
    const span = document.querySelector('.box h4 span')
    const question = ['写字', '吃饭', '睡觉', '玩', '喝水']
    const end = document.querySelector('.end')
    const start = document.querySelector('.begin')
    let i = 0
    let n = 0
    start.addEventListener('click', function () {
      n = setInterval(function () {
        i++
        if (i === 5) {
          i = 0
        }
        const span = document.querySelector('.box h4 span')
        span.innerHTML = question[i]
      }, 10)
    })
    end.addEventListener('click', function jieshu() {
      clearInterval(n)
    })
  </script>


</body>

</html>

练习：Tab 栏切换

页面展示：

代码部分：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 400px;
      height: 200px;

    }

    .top {
      height: 50px;
    }

    .zuo {
      float: left;
      width: 160px;
      height: 50px;
      background-color: red;
    }

    ul {
      float: right;
      width: 240px;
      height: 50px;
      background-color: pink;
    }

    li {
      padding-right: 10px;
      width: 40px;
      float: right;
      list-style: none;
    }

    .bottom {
      height: 150px;
    }

    .box1 {
      float: left;
      width: 100px;
      height: 100%;

    }

    .box2 {
      float: left;
      width: 300px;
      height: 100%;

    }

    img {
      width: 100%;
      height: 100%;
    }
    .bottom {
      display: none;
    }
    .active {
      color: red;
    }
    .dong {
      display: block;
    }
  </style>
</head>
<div class="box">
  <div class="top">
    <div class="zuo">每日特价</div>
    <ul>
      <li><a class="active" href="#">精选</a></li>
      <li><a href="#">美食</a></li>
    </ul>
  </div>
  <div class="btm">
    <div class="bottom dong">
      <div class="box1"><img src="1.png" alt=""></div>
      <div class="box2"><img src="3.png" alt=""></div>
    </div>
    <div class="bottom">
      <div class="box1"><img src="2.png" alt=""></div>
      <div class="box2"><img src="4.png" alt=""></div>
    </div>
  </div>
</div>


<body>
  <script>
    const as = document.querySelectorAll('ul a')
    console.log(as)
    for (let i = 0; i < as.length; i++) {
        as[i].addEventListener('mouseenter', function () {
        document.querySelector('ul .active').classList.remove('active')
        this.classList.add('active')
        document.querySelector('.btm .dong').classList.remove('dong')
        document.querySelector(`.btm .bottom:nth-child(${i+1})`).classList.add('dong')
      })
    }
  </script>
</body>

</html>

练习：复选框全选

界面展示：

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .text {
      margin: 0 auto;
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="text">
    <h3><input class="0" type="checkbox"><span></span><span></span><span></span><span></span></h3>
    <table>
      <tr>
        <td><input class="1" type="checkbox"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><input class="2" type="checkbox"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><input class="3" type="checkbox"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <script>
    const box = document.querySelectorAll('input')
    console.log(box)
    box[0].addEventListener('click', fn)
    function fn() {
      for (let i = 1; i < box.length; i++) {
        box[i].checked = box[0].checked
      }
    }
    for (let i = 1; i < box.length; i++) {
      box[i].addEventListener('click', function () {
        box[0].checked = document.querySelectorAll('table input:checked').length === 3
      })
    }
  </script>
</body>

</html>