【JS基础】定时器的使用、事件监听

已于 2024-06-18 18:42:27 修改
阅读量524 收藏 8
点赞数 10
分类专栏： 前端三件套 文章标签： javascript 开发语言 ecmascript 前端 html5 html jquery
于 2024-01-26 17:14:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62599305/article/details/135870034
版权

文章目录

前言

JavaScript 中的定时器和事件监听是 Web 开发中至关重要的两个概念。定时器允许开发者安排代码在未来的某个时间点执行，而事件监听则允许我们捕获和处理用户交互或其他类型的事件。这两个概念为构建交互式、动态的 Web 应用程序提供了强大的工具。

定时器的使用
定时器在 JavaScript 中有两种主要的实现方式：setTimeout() 和 setInterval()。setTimeout() 允许你在一段时间后执行代码，而 setInterval() 则允许你按照指定的时间间隔重复执行代码块。

使用定时器的关键是理解参数的含义以及如何管理定时器的生命周期。我们可以利用定时器执行动画、轮询服务器数据、处理用户输入等各种任务，但过度使用定时器可能会导致性能问题和不必要的资源消耗。

事件监听
事件监听是 JavaScript 中处理用户交互和应用程序状态变化的重要方式之一。通过事件监听，我们可以捕获用户的鼠标点击、键盘输入、窗口大小变化等各种事件，并作出相应的反应。

在事件监听中，我们需要了解事件流、事件冒泡和事件捕获等概念。通过添加事件监听器，我们可以使我们的应用程序更具交互性和响应性，提升用户体验。

一、定时器

1.1定时器是什么

在 JavaScript 中，定时器是一种用于调度代码在将来某个时间点执行的机制，即过一段时间执行一段代码。

1.2 setInterval函数

函数怎么使用：

setInterval(要执行的函数,间隔时间以ms为单位)

示例代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="old Name">
        Test
    </div>
    
</body>

<script>
    setInterval(()=>{
        console.log('setInterval running')
    },1000)
</script>

</html>

在这里插入图片描述
在这里插入图片描述

注意:
函数名字不需要加括号
定时器返回的是一个id数字

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="old Name">
        Test
    </div>
    
</body>

<script>
    let n = setInterval(()=>{
        console.log('setInterval running')
    },1000)
    console.log(n)

</script>

</html>

在这里插入图片描述

1.3 关闭定时器

clearInterval

使用方法:

clearInterval(定时器id)

示例代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="old Name">
        Test
    </div>
    
</body>

<script>
    let n = setInterval(()=>{
        console.log('setInterval running')
        clearInterval(n)
    },1000)
    console.log(n)

</script>

</html>

在这里插入图片描述

二、事件监听

2.1 事件监听是什么

事件监听是一种用于捕获和处理事件的机制。在 Web 开发中，事件可以是用户交互、浏览器状态变化等引发的动作。JavaScript 允许开发者为特定的事件类型注册监听器，并在事件发生时执行相应的代码。

2.2 事件监听的使用

基本语法

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

点击事件

事件类型为click
示例代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>点我</button>
    
</body>

<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function(){
        console.log('我被点击了')
    })

</script>

</html>

在这里插入图片描述

鼠标事件

鼠标事件除了click还有mouseenter鼠标进入mouseleave鼠标离开
示例代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>点我</button>
    
</body>

<script>
    const btn = document.querySelector('button')
    btn.addEventListener('mouseenter',()=>{
        console.log('鼠标进入')
    })
    
	btn.addEventListener('mouseleave',()=>{
        console.log('鼠标离开')
    })

</script>

</html>

在这里插入图片描述
在这里插入图片描述

焦点事件

他是表单获取光标时触发:
他有这两个focus、blur分别是得到焦点和失去焦点
示例代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <input class="input">
    
</body>

<script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function(){
        console.log('input有焦点了');
    })

    input.addEventListener('blur', function(){
        console.log('input无焦点了');
    })

</script>

</html>

在这里插入图片描述
在这里插入图片描述

键盘事件

他有两个事件名称:keydown和keyup按键按下和抬起
示例代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <input class="input">
    
</body>

<script>
    const input = document.querySelector('input')
    input.addEventListener('keydown', function(){
        console.log('键盘按下了');
    })

    input.addEventListener('keyup', function(){
        console.log('键盘抬起了');
    })

</script>

</html>

在这里插入图片描述
除了按下和抬起还有一个input即把按下和抬起变成一个了。示例代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <input class="input">
    
</body>

<script>
    const input = document.querySelector('input')
    input.addEventListener('input', function(){
        console.log('输入了');
    })

</script>

</html>

2.3 事件对象event

总结

定时器和事件监听是 JavaScript 中非常重要的概念，它们为我们构建动态、交互式的 Web 应用程序提供了必要的工具和机制。合理使用定时器可以使应用程序更具活力，而事件监听则使应用程序能够捕获用户的交互动作，从而更好地响应用户的需求。

在实际应用中，我们应该注意避免过度使用定时器，以及合理管理事件监听器，以提升应用程序的性能和用户体验。深入理解定时器和事件监听的原理，将有助于我们更好地应用它们来开发出更加优秀的 Web 应用程序。

人才程序员
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3597
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
定时器和事件监听器
Judy_qiudie
08-05 927
一、定时器 setTimeout&clearTimeout 1、t=setTimeout(code, time) 方法用于在指定的毫秒数后调用函数或计算表达式,setTimeout() 只执行 code 一次。 如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout() 2、clearTimeout(t) 方法可取消由 setTime...
js模块（常用事件、事件监听器）
weixin_43847807的博客
10-23 390
事件相关常用事件1事件监听器常用事件2事件监听器与事件的区别事件监听中事件执行顺序事件代理e的使用组合键使用 常用事件1 在事件中，事件需要加上 on 关键字 .onclick 点击事件 .onomuseover 鼠标移入事件 .onchange 改变事件(表单标签，选中状态切换的触发) .onmouseout 鼠标移出时间 .onload 加载事件 .onreadystatec
js定时器
最新发布
qq_68971977的博客
05-31 251
window.setTimeout(回调函数，延迟秒数)window.setTimeout(回调函数，延迟秒数)clearInterval()关闭定时器。clearTimeout()关闭定时器。
JavaScript的定时器用法详解
关注我！带你一路 "狂飙" 到底！
07-05 4987
●设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的。●当 js 遇到异步代码的时候, 会先拿出来, 放在异步队列内等待, 暂时不执行。●在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器。●同步代码优先执行，执行完了同步代码以后在去执行异步代码。●异步代码在宿主环境中执行 执行完毕以后存放到任务队列中。●时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟。●返回值是，当前这个定时器是页面中的第几个定时器。●返回值是，当前这个定时器是页面中的第几个定时器。
JS中的事件监听
热门推荐
杜永康的博客
03-30 1万+
事件监听是Web开发中非常重要的一个概念，掌握了它的用法，可以让我们实现更加丰富和动态的交互效果。在实际开发中，我们需要根据具体的需求选择合适的事件类型和事件处理函数，以及注意事件传播和事件对象的相关问题。
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5620
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
事件监听及JS相关基础
05-31
在JavaScript编程中，事件监听是实现用户交互的关键技术。它允许我们对用户的特定行为做出响应，比如点击按钮、提交表单或更改输入字段等。本文将深入探讨事件监听及其相关基础知识，包括事件绑定、事件解绑、常见...
js定时器+简单的动画效果实例
10-19
通过以上两个示例，我们可以看到JavaScript定时器在实现网页动态效果中的核心作用。它允许开发者按照预定的时间间隔执行一系列操作，从而创造出流畅的动画体验。结合CSS样式和JavaScript事件处理，我们可以创造出...
js实现时钟定时器
10-15
`onclick`事件监听器用于触发对应的JavaScript函数。 总的来说，这个JavaScript时钟定时器实例展示了如何使用Date对象获取当前时间，以及如何利用`setInterval`和`clearInterval`来实现定时更新和停止更新。这个...
js定时器实例分享
10-20
这个实例不仅展示了定时器的基本用法，还包含了事件监听、DOM操作以及数组的应用，是学习JavaScript定时器的一个良好示例。希望这篇文章的内容对你的学习有所帮助，记得理论结合实践，才能更好地掌握这些知识！
JavaScript-定时器0~9抽奖系统详解（代码）
10-19
JavaScript定时器0~9抽奖系统是一种常见的互动娱乐功能，常用于网页或应用中，增加用户参与度。这个系统的核心在于使用JavaScript的定时器（`setInterval`和`clearInterval`）来实现数字滚动效果，模拟抽奖的过程。...
JS-定时器的4种写法及介绍
2401_84152879的博客
04-13 398
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！小节点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-cXaFD5fI-1712941976756)][外链图片转存中…(img-JRnKPeI6-1712941976756)]
JS精髓中的精髓，事件进阶使用
大河之犬的博客
10-07 708
每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件。在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。如果我们要给元素添加一个事件，一般会通过操作HTML属性的方式来实现，这种方式其实也叫作“事件处理器”当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是。
八、JavaScript：事件监听器
斯文~
09-20 1069
JavaScript：事件监听器
JS定时器
qq_45938664的博客
06-29 7906
定时器定义：JavaScript中提供一定是时间之后触发的功能，就叫做定时器。JS的两种定时器：setTimeout函数：window.setTimeout(调用函数,[延迟毫秒数])； 注意：只会执行一次setInterval函数：window. setInterval(调用函数,[延迟毫秒数])； 注意：反复执行，每隔一个定时时间，就会执行一次 取消定时器：clearTimeout(timeoutID)方法 clearInterval(intervalID)方法Swiper介绍：swiper是一款开源的
JS事件监听器
wytccc的博客
11-04 439
给一个元素的某一个事件类型添加多个函数；精确删除某一个事件类型下的某一个函数
JavaScript原生实现事件监听及手动触发
qq_35134066的博客
07-30 1万+
我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件. jquery实现方法就是trigger('eventType') 原生实现: <input type="checkbox" id="chk"> document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec
javaWeb监听器结合定时器实现定时执行任务
向阳的小花
11-23 3029
java监听器 通过监听器可以自动的激发一些操作，比如监听在线人数； 监听器接口有： ServletContextListener——监听ServletContext对象； HttpSessionListener——监听session对象； ServletRequestListener——监听request对象； java监听器的使用步骤 1.确定监听的对象，实现对应接口，并
定时器加监听事件js
08-30
在JavaScript中，我们可以使用定时器（Timer）结合监听事件（Event Listener）来实现一些特定的功能。 定时器可以通过`setTimeout()`和`setInterval()`函数来创建。`setTimeout()`函数用于在指定的时间后执行一次代码，而`setInterval()`函数则会每隔指定的时间重复执行一次代码。 当我们需要在特定时间或特定间隔内执行某段代码时，我们可以使用定时器来实现。例如，我们可以使用`setTimeout()`来延迟执行某个函数，让其在一段时间后执行。下面是一个示例： ```javascript function showMessage() { console.log('Hello, world!'); } setTimeout(showMessage, 3000); // 3秒后执行showMessage函数 ``` 而监听事件的作用是为了在特定的事件发生时执行相应的代码。在JavaScript中，可以使用`addEventListener()`函数来给元素绑定事件监听器。 例如，我们可以给一个按钮添加点击事件的监听器，当用户点击该按钮时执行某段代码。下面是一个示例： ```javascript var button = document.querySelector('button'); function handleClick() { console.log('Button clicked!'); } button.addEventListener('click', handleClick); ``` 以上的代码中，我们首先通过`querySelector()`方法获取到一个HTML中的按钮元素，然后定义一个`handleClick()`函数，该函数在按钮被点击时会打印一条信息。接着，使用`addEventListener()`方法将`handleClick()`函数绑定到按钮的`click`事件上，以便在按钮被点击时执行。 综上所述，通过结合定时器和监听事件，我们可以在指定的时间或事件发生时执行一段代码，从而实现特定的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人才程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值