第五周：事件

lililican

于 2024-04-25 20:19:14 发布

阅读量245

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/2301_80196462/article/details/137967985

版权

一、事件监听

事件：在编程时系统发生的动作或事情（比如单击一个按钮）

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

语法：

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

事件监听三要素：

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

eg:下面是一个例子，点击X可关闭盒子

<!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 {
            height:200px;
            width: 300px;
            background-color: pink;
            margin: auto;
            text-align: center;
        }
        .box1 {
            display: flex;
            justify-content: flex-end;
            padding-right: 10px;
            padding-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">X</div>
        <h1>这是一个广告</h1>
    </div>
    <script>
        const box1 = document.querySelector('.box1')
        const box = document.querySelector('.box')
        box1.addEventListener('click',function(){
            box.style.display = 'none'
        })
    </script>
</body>
</html>

二、事件类型

1.鼠标事件：

click:鼠标点击

mouseenter：鼠标经过

mouseleave：鼠标离开

2.焦点事件：表单获得光标

focus：获得焦点

blur：失去焦点

eg:下面是一个简单的搜索框案例

<!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-sizing: border-box;
        }
        ul{
            list-style:none;
        }
        .result-list{
            display:none;
            position:absolute;
            left:0;
            top:30px;
            width:223px;
            border: 1px solid orange;
            border-top: 0;
            background: white;
        }
        .box{
            position: relative;
            width: 223px;
            margin: 100px;
        }
        .box input{
            width: 223px;
            height: 30px;
            padding: 0 10px;
            fomt-size:14px;
            line-height: 48px;
            border:1px solid grey;
            outline:none;
        }
        .result-list a{
            display:block;
            padding: 6px 15px;
            font-size: 12px;
            color:black;
            text-decoration: none;
        }
        .result-list a:hover {
            background-color: rgb(108, 103, 103);
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="search" placeholder="搜索框">
        <ul class="result-list">
            <li><a href="#">111</a></li>
            <li><a href="#">222</a></li>
            <li><a href="#">333</a></li>
            <li><a href="#">444</a></li>
            <li><a href="#">555</a></li>
        </ul>
    </div>
    <script>
        const input = document.querySelector('input')
        const ul=document.querySelector('.result-list')
        input.addEventListener('focus',function(){
            ul.style.display='block'
        })
        input.addEventListener('blur',function(){
            ul.style.display='none'
        })
    </script>
</body>
</html>

3.键盘触发

keydown：键盘按下触发

<!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('keyup',function(e){
            if(e.key==='Enter')
            console.log('我按下了回车键')
        })
    </script>
</body>
</html>

keyup：键盘抬起触发

4.文本事件

input：用户输入事件

三、事件对象

事件对象是什么：也是对象，对象里有事件触发时的相关信息

使用场景：可以判断用户按下哪个键，判断鼠标点击了哪个元素

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

常用属性

type：获取当前的事件类型
clientX / clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值

四、环境对象

是什么：指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境

谁调用，this指向谁

五、回调函数

将函数A作为参数传递给函数B时，称A为回调函数

六、事件流

事件流指的是事件完整执行过程中的流动路径

两个阶段：捕获阶段（父到子）、冒泡阶段（子到父）

1.事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（同一种类型，如点击事件）

事件冒泡默认存在

2.阻止冒泡

事件对象.stopPropagation()

阻止冒泡和捕获

<!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>
        .box1{
            background-color: red;
            width: 400px;
            height: 400px;
        }
        .box2{
            background-color: pink;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        document.addEventListener('click',function(){
            alert('爷爷')
        })
        const fa=document.querySelector('.box1')
        fa.addEventListener('click',function(){
            alert('父亲')
        })
        const son=document.querySelector('.box2')
        son.addEventListener('click',function(e){
            alert('儿子')
            e.stopPropagation()//添加后只会弹出‘儿子’
        })
        
    </script>
</body>
</html>

3.解绑事件

属性.removeEventListener('click',函数名）

注意：匿名函数无法解绑

七、事件委托

优点：减少注册次数，可以提高性能

原理：利用事件冒泡的特点

给父元素注册事件，当我们触发子元素时，会冒泡到父元素上，从而触发父元素的事件

实现：事件对象.target.tagName可以获得真正触发事件的元素

lililican

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
第五周：事件

让事件检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或注册事件，比如鼠标经过显示下拉菜单。给父元素注册事件，当我们触发子元素时，会冒泡到父元素上，从而触发父元素的事件。实现：事件对象.target.tagName可以获得真正触发事件的元素。事件对象是什么：也是对象，对象里有事件触发时的相关信息。当一个元素触发事件后，会依次向上调用所有父级元素的。两个阶段：捕获阶段（父到子）、冒泡阶段（子到父）事件流指的是事件完整执行过程中的流动路径。是什么：指的是函数内部特殊的变量。
复制链接

扫一扫