6.1 JavaScript Apis - 定时器、事件监听、鼠标事件、键盘事件

最新推荐文章于 2025-12-11 16:09:33 发布

原创

最新推荐文章于 2025-12-11 16:09:33 发布 · 843 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #计算机外设 #开发语言

JavaScript Apis -定时器、事件监听、鼠标事件、键盘事件

文章目录

JavaScript Apis -定时器、事件监听、鼠标事件、键盘事件
一、间歇函数
- 1.1 介绍
- 1.2 倒计时效果
二、事件

一、间歇函数

定时器有两种，今天先看间歇函数

1.1 介绍

开始定时器

setInterval(函数,间隔时间)

作用：每隔一段时间就会调用这个函数

间隔时间单位是毫秒

<script>
  setInterval(function() {
   
   
    console.log("间歇函数执行了")
  },1000)
</script>

注意

定时器返回的是一个id数字，每一个定时器都是独一无二的

fuction fn(){
   
   
    console.log('一秒执行一次')
}
// 注意这里没有加小括号，如果加了小括号fn()表示调用的意思
setInterval(fn,1000)
//setInterval('fn()',1000) 如果一定要加小括号的话可以这么写，但是一般不这么写

关闭定时器

let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)

1.2 倒计时效果

案例：阅读注册协议

需求：按钮60s之后才可以使用

分析：

开始先把按钮禁用（disabled属性）
一定要获取元素
函数内部处理逻辑

秒数开始减减

按钮里面的文字跟着一起变化

如果秒数等于0，停止定时器，里面文字变为同意，最后按钮可以点击

<body>
<textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
  //1.获取元素
  const btn = document.querySelector('.btn')
  console.log(btn.innerHTML)//这个表单button比较特殊，是个双标签，不是使用value获取的（之前input是单标签，使用value获取的），是使用innerHTML获取的
  //2.倒计时
  let i = 5
  // 2.1开启定时器
  var interval = setInterval(function() {
   
   
    i--
    btn.innerHTML = `我已经阅读用户协议(${
     
     i})`
    if (i === 0) {
   
   
      //关闭定时器
      clearInterval(interval)
      btn.disabled = false
      btn.innerHTML = '同意'
    }
  }, 1000)
  
</script>

</body>

二、事件

2.1 添加事件监听

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

比如用户在网页上单击一个按钮

事件监听：让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等

也称之为注册事件

语法

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

事件监听的三要素

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

事件监听的版本

DOM L0

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

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

我们现在使用的是这个版本的事件监听

区别

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

示例：点击了按钮，弹出一个对话框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
  //需求“点击了按钮，弹出一个对话框
  //1.事件源 按钮
  const btn = document.querySelector('button')
  //2.事件类型 点击鼠标
  //3.事件处理程序，弹出对话框
  btn.addEventListener('click',function(){
   
   
    alert('你好呀')
  })

</script>
</body>
</html>

示例：点击叉号，关闭广告

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

2.2 事件类型

2.2.1 鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果，推荐使用这两个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
    div {
   
   
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
<div></div>
<script>
  const div = document.querySelector('div')
  //鼠标经过
  div.addEventListener('mouseenter', function() {
   
   
    console.log('鼠标经过')
  })
  //鼠标离开
  div.addEventListener('mouseleave', function() {
   
   
    console.log('鼠标离开')
  })
</script>
</body>
</html>

2.2.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>

比如，失去光标的话，不存在搜索框

假如说存在光标的话，下面就会出现一些建议搜索的信息

实现这个小案例

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米搜索框</title>
  <style>
      * {
   
   
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      ul {
   
   

          list-style: none;
      }

      .mi {
   
   
          position: relative;
          width: 223px;
          margin: 100px auto;
      }

      .mi input {
   
   
          width: 223px;
          height: 48px;
          padding: 0 10px;
          font-size: 14px;
          line-height: 48px;
          border: 1px solid #e0e0e0;
          outline: none;
      }

      .mi .search {
   
   
          border: 1px solid #ff6700;
      }

      .result-list {