js之事件监听以及相关案例

最新推荐文章于 2024-07-09 18:13:44 发布

Magic.462

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量477

点赞数 9

文章标签： javascript 前端开发语言 css

本文链接：https://blog.csdn.net/2302_80141844/article/details/139631923

版权

这里写目录标题

一级目录
- 二级目录
- - 三级目录
Web APIs02
一、事件监听
二、事件类型
随机点名之事件监听版本

一级目录

二级目录

三级目录

Web APIs02

一、事件监听

1.定义

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

2.调用语法

元素对象.addEventListener(‘事件类型’，要执行的函数)

3.事件监听三要素

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

4.事件监听版本

DOM LO
事件源.on事件=function(){}
DOM L2
事件源.addEventListener(事件，事件处理函数)
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

二、事件类型

鼠标事件：鼠标触发
click鼠标点击，mouseenter鼠标经过，mouseleave鼠标离开

焦点事件：表单获得光标
focus获得焦点，blur失去焦点

键盘事件：键盘触发
Keydown键盘按下触发，Keyup键盘抬起触发

文本事件：表单输入触发
input用户输入事件

js自动调用点击事件 click():
例如：自动播放模块
setInterval(function(){
next.click()//next为右箭头的对象
},1000)

随机点名之事件监听版本

案例要求

不断点击开始结束从已定数组中抽取人，已被抽取的人要从原定数组中去除，直至数组中只剩最后一个人，禁用按钮，停止抽取

大致思路

先获取dom对象

需要开始、结束按钮和更改人名的盒子

理解程序运行

鼠标点击的事件类型触发事件监听，事件源为“开始”按钮，触发函数为每隔0.1秒更换一个人名，利用定时器函数，不断更改uname的人名，同理，当我们点击“结束”按钮时，关闭定时器，并且将此人名从数组中移除
注意，当数组长度为1时，禁用开始和结束按钮，由于两次事件监听都需要定时器函数，所以设置定时器函数为全局变量，随机数同理

完整代码

<!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>
        .big {
            margin:100px auto;
            width: 300px;
            height: 500px;
        }
        .start,
        .end {
            width: 100px;
            height: 50px;
        }
        .uname {
            /* background-color: pink; */
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="box">
            <div>这次会是谁呢</div>
            <div class="uname">ddd</div>
        </div>
        <div class="btn">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
    <script>
        const arr=['a','b','c','d','e','f']
        let random=0
        let timer=0
        const uname=document.querySelector('.uname')
        const start=document.querySelector('.start')
        start.addEventListener('click',function(){
            timer=setInterval(function(){
                random=Math.floor(Math.random()*arr.length)
                uname.innerHTML=arr[random]
            },100)
            if(arr.length===1){
                start.disabled=end.disabled=true
            }
        })
        const end = document.querySelector('.end')
        end.addEventListener('click',function(){
            clearInterval(timer)
            arr.splice(random,1)
        })
    </script>
</body>
</html>