间歇函数setInterval、定时器、阅读间歇事件（按钮60秒后才能使用）、事件监听(绑定)addEventListener、事件类型、焦点事件、键盘事件focus、环境对象This、回调函数

最新推荐文章于 2024-06-01 10:35:00 发布

初闻女人香

最新推荐文章于 2024-06-01 10:35:00 发布

阅读量904

点赞数 16

文章标签：数据库 javascript 前端开发语言 html

本文链接：https://blog.csdn.net/m0_70251011/article/details/135641278

版权

定时器

每个定时器都是独一无二的
在这里插入图片描述
作用：每隔一段时间调用这个函数
间隔的单位是毫秒
两种写法：

注意事项：

阅读间歇事件

在这里插入图片描述


<body>
    <textarea name="" id="" cols="30" rows="10">
        16543458151634651521644515321364683431346843843
    </textarea>
    <br>
    <button class="btn">OK(5)</button>
    <script>
        //获取元素
        const btn = document.querySelector('.btn')
        //倒计时
        let i = 5
        //开启定时器
        let n = setInterval(function () {
            i--
            //button按钮特殊，用innerHTML
            btn.innerHTML = `OK(${i})`
            if (i === 0){
                clearInterval(n) // 关闭定时器
            //定时器停了 我就可以开按钮了
            btn.disabled = false
            btn.innerHTML = '同意'
            }
        }, 1000)
    </script>
</body>

事件监听(绑定)

请添加图片描述

在这里插入图片描述

<body>
    <button>点击</button>
    <script>
        //需求：点击按钮 弹出一个对话框
        //事件源： 按钮 获取
        //事件类型： 点击鼠标
        //事件处理程序 ： 弹出对话框
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('111')
        } )
        
    </script>
</body>

事件类型

在JS中，有很多不同的事件类型可供监听，以下是常见的事件类型：
click：用户单击了某个元素。

dblclick：用户双击了某个元素。

mousedown：用户按下了鼠标按钮。

mouseup：用户释放了鼠标按钮。

mousemove：用户移动了鼠标。

mouseover：鼠标移到某个元素上。

mouseout：鼠标从某个元素移开。

keydown：用户按下了键盘上的某个键。

keyup：用户释放了键盘上的某个键。

focus：某个元素获得了焦点。
blur：某个元素失去了焦点。

load：某个元素完成加载。

unload：某个元素被卸载。

事件监听基本概念：

element.addEventListener(event, function, useCapture);

element指的是要监听的HTML元素
event指的是要监听的事件类型
function指的是在事件发生时要执行的函数
useCapture是一个可选的布尔值，用于指定事件是否在捕获阶段处理

<button id="myButton">Click me!</button>

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

使用getElementById()方法获取了ID为myButton的按钮元素，并使用addEventListener()方法在其上添加了一个点击事件监听器。当用户点击该按钮时，会弹出一个警告框，显示"Button clicked!"。

焦点事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<input type="text">
<script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
        console.log('有焦点');
    })
    input.addEventListener('blur', function () {
        console.log('失去焦点');
    })

</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>
</head>
<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keydown',function(){
            console.log('按下');
        })
        input.addEventListener('keyup',function(){
            console.log('弹起');
        })
    </script>
</body>
</html>

文本事件

在这里插入图片描述

环境对象This

在这里插入图片描述
作用：弄清楚this指向，可以让我们代码更简洁

<body>
    <button>点击</button>
    <script>
        // //每个函数里面都有this 环境对象 普通函数里面的this指向的是window
        // function fn (){
        //     console.log(this);
        // }
        // window.fn()//window对象

        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(this);//btn对象
        })
    </script>
</body>

在这里插入图片描述
谁调用，this就指向谁

回调函数

在这里插入图片描述

初闻女人香

关注

16
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
间歇函数setInterval、定时器、阅读间歇事件（按钮60秒后才能使用）、事件监听(绑定)addEventListener、事件类型、焦点事件、键盘事件focus、环境对象This、回调函数

使用getElementById()方法获取了ID为myButton的按钮元素，并使用addEventListener()方法在其上添加了一个点击事件监听器。// //每个函数里面都有this 环境对象普通函数里面的this指向的是window。// window.fn()//window对象。keydown：用户按下了键盘上的某个键。mousedown：用户按下了鼠标按钮。keyup：用户释放了键盘上的某个键。//需求：点击按钮弹出一个对话框。//定时器停了我就可以开按钮了。
复制链接

扫一扫