js:事件监听

事件监听

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

事件：编程系统内发生的动作或发生的事情

比如用户单击一个按钮下拉菜单

添加事件监听

事件监听三要素：

事件源：哪个dom元素被事件触发了，要获取dom元素

事件类型：用什么方式触发的？例如鼠标单击click、鼠标经过mouseover等

事件调用的函数：事件处理程序，要做什么事

感觉有点像线程。。也有点像伪类选择器

写一个关闭小广告的案例：

<!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 {
            position: relative;
            height: 400px;
            width: 400px;
            background-color: aquamarine;
            margin: 10px auto;
        }
        .box1{
            position: absolute;
            right: 20px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: skyblue;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        我是广告
        <botton class="box1">
            X
        </botton>
    </div>
    <script>
        const box1=document.querySelector('.box1')
            const box = document.querySelector('.box')
        box1.addEventListener('click',function(){
            box.style.display='none'
        })
    </script>
</body>

</html>

随机点名：

js部分：

  const arrName = ['励志轩', '荷叶饭', '来上课', '好耶', '产业化', '雷阵雨', '蚊子咬']
        const start = document.querySelector('.start')
        start.addEventListener('click', function () {
            const random = parseInt((Math.random() * arrName.length))
            console.log(arrName[random]);
        })

验证一下：

再写一个监听end按钮的事件监听

<!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>
        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .qs {
            width: 450px;
            height: 40px;
            color: lightcoral;
        }

        .btn {
            text-align: center;
        }

        .btn button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
        <div class="btn">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
    <script>
        const arrName = ['励志轩', '荷叶饭', '来上课', '好耶', '产业化', '雷阵雨', '蚊子咬']
        const start = document.querySelector('.start')
        const qs = document.querySelector('.qs')
        let n = 0
        let random = 0
        start.addEventListener('click', function () {
            n = setInterval(function () {
                random = parseInt((Math.random() * arrName.length))
                // console.log(arrName[random]);
                qs.innerHTML = arrName[random]
            }, 35)
            if (arrName.length === 1) {
                start.disabled = true
                end.disabled = true
            }
        })

        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            clearInterval(n)
            arrName.splice(random, 1)
            console.log(arrName)

        })

    </script>
</body>

</html>

生成随机数的变量在定时器结束后有一个销毁，所以可以一直承载不同的数据

事件类型

焦点：光标被激活的位置

光标位置：小竖线/横线的位置

现在大部分的光标都为一个小竖线，规则的闪动；

而在DOS下有些光标则是短短的小横线，同样规则的闪动；

现用的windows光标是一个图像，可以是动态的也可以是静态的，在不同情况下样子也不同。

鼠标位置：移动鼠标停下时的所在坐标位置

通过监听某个事件执行某些函数

举个例子：

键盘事件：例如按下回车发送评论

监听文本框的内容，每改变一次输入内容，执行一次函数

可以获取文本框输入的内容

 console.log(input.value)

事件对象

如何获取事件对象

事件对象的本质上是个对象

这个对象内部里有事件触发的相关信息，例如鼠标点击事件中，事件对象内部就存储了鼠标点击位置的信息

使用场景：判断用户按下了哪个键，比如按回车键发送评论；判断鼠标点击的元素

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

 tx.addEventListener('input',function(就是这个位置，这个参数就是事件对象，一般命名为e、en){
           
        })
eg: tx.addEventListener('input',function(e){
           
        })

监听一个按钮被按下的事件，对象里会发生什么：

  const button=document.querySelector('button')
        button=addEventListener('click',function(e){
            console.log(e)
        })

此时这个对象就是你刚刚点击的对象（相对于伪类选择器里，选择你选中或经过的元素，js里就相当于把你刚刚点击的元素定义为一个对象）

e这个参数只有在addEventListener这个函数里，才代表着一个对象，在其他函数里只是普通的参数e

使用事件对象里的属性

事件对象里有很多属性，常用的有

type:获取当前事件的类型，例如上一个按钮点击的例子，事件类型就是click

clientX/clientY:获取当前光标相对于浏览器可见窗口的左上角的位置

offsetX/offsetY：获取光标相对于当前dom元素左上角的位置

key:用户现在按下键盘键的值（keyCode是以前的用法）

按下不同键盘值后key的值

 const input = document.querySelector('input')
        input.addEventListener('keyup', function (e) {
            console.log(e.key);
        })

使用监听事件写一个b站评论样式

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            min-width: 400px;
            max-width: 800px;
            display: flex;
            justify-content: flex-end;
            margin: 20px 20px;
        }


        .wrapper textarea {
            outline: none;
            border-color: transparent;
            resize: none;
            /* 去除右下角的小三角 */
            background: #f5f5f5;
            border-radius: 4px;
            flex: 1;
            padding: 10px;
            transition: all 0.5s;
            height: 30px;
        }

        .wrapper textarea:focus {
            border-color: #e4e4e4;
            background-color: #fff;
            height: 50px;
        }

        .wrapper button {
            background: #00aeec;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            width: 70px;
            cursor: pointer;
        }

        .wrapper .total {
            color: #999;
            margin-right: 80px;
            transition: all 0.5s;
            opacity: 0;
            margin-top: 5px;
        }

        .list {
            min-width: 400px;
            max-width: 800px;
            display: flex;
        }

        .list .item {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            background: url(/js/images/微信图片_20241209195234.png) no-repeat center / cover;
            margin-right: 20px;
        }

        .list .item p {
            margin: 0;
        }

        .list .item .info {
            flex: 1;
            border-bottom: 1px dashed #e4e4e4;
            padding-bottom: 10px;
        }

        .list .item .name {
            color: #FB7299;
            font-size: 14px;
            font-weight: bold;
        }

        .list .item .text {
            color: #333;
            padding: 10px 0;
        }

        .list .item .time {
            color: #999;
            font-size: 12px;
        }
    </style>
</head>

<body>


    <div class="wrapper">
        <i class="avatar"></i>
        <textarea id="tx" placeholder="进来和up唠会嗑呗~"></textarea>
        <button>发布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200字</span>
    </div>
    <div class="list">
        <div class="item" style="display: none;">
            <!-- 隐藏 -->
            <div class="avatar"></div>
            <div class="info">
                <p class="name">August</p>
                <p class="text"></p>
                <p class="time"></p>
            </div>
        </div>
    </div>
    <script>
        const tx = document.querySelector('#tx')
        const total = document.querySelector('.total')
        const item = document.querySelector('.item')
        const text = document.querySelector('.text')
        const list = document.querySelector('.list')

        //1.文本域获得焦点，total显示出来
        tx.addEventListener('focus', function () {
            total.style.opacity = 1
        })
        //2.文本域失去焦点，total隐藏出来
        tx.addEventListener('blur', function () {
            total.style.opacity = 0
        })
        //3.检测用户输入
        tx.addEventListener('input', function () {
            //console.log(tx.value.length)获取长度
            total.innerHTML = `${tx.value.length}/200字`
        })
        //4.按下回车发布评论
        tx.addEventListener('keyup', function (e) {
            //按下回车键触发
            if (e.key === 'Enter') {
                //console.log(11);
                //trim（）防止用户两边输入空格或者全为空格，去除空格
                if (tx.value.trim()) {
                    item.style.display = 'flex'
                    text.innerHTML = tx.value.trim()
                    //console.log(tx.value);
                }
                //按下回车的同时清空文本域
                tx.value = ''
                total.innerHTML = `0/200字`


            }
        })
    </script>
</body>

</html>

一个令我疑惑的问题是text.innerHTML = tx.value.trim()这句为什么写成text.innerHTML = tx.value也可以有效去除空格

轮播图完整版

<!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;
        }

        li {
            list-style: none;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="../../images/slider01.jpg" alt="">
        </div>
        <div class="slider-footer">
            <p>真正的jo厨出现了！</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        const sliderData = [
            { url: '../../images/slider01.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: '../../images/slider02.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: '../../images/slider03.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: '../../images/slider04.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
        ]
        //获取元素
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('.slider-footer p')
        const footer = document.querySelector('.slider-footer ')
        let i = 0
        //点击右侧按钮更换图片的操作
        const next = document.querySelector('.next')
        next.addEventListener('click', function () {//事件名称直接当匿名函数的名称传给next
            console.log(11);
            i++
            if (i >= sliderData.length) i = 0
            toggle(i)
        })
        //点击左侧按钮更换图片的操作
        const prev = document.querySelector('.prev')
        prev.addEventListener('click', function () {
            console.log(22);
            i--
            if (i < 0) i = sliderData.length - 1
            toggle(i)
        })
        //公共代码
        function toggle(i) {
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            footer.style.backgroundColor = sliderData[i].color
            document.querySelector('.slider-indicator .active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

        }
        //开启定时器
        let timeId = setInterval(function () {
            next.click()//调用按右边按钮的方法吗，功能是一样的
            // i++
            // if (i >= sliderData.length) i = 0
            // img.src = sliderData[i].url
            // p.innerHTML = sliderData[i].title
            // //删除之前的active效果
            // document.querySelector('.slider-indicator .active').classList.remove('active')
            // document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
        }, 1000)
        const slider = document.querySelector('.slider')
        slider.addEventListener('mouseenter', function () {
            clearInterval(timeId)
        })
        slider.addEventListener('mouseleave', function () {
            timeId = setInterval(function () {
                next.click()
            }, 1000)
        })
    </script>
</body>

</html>

实现了：

1.自动播放

2.鼠标碰到大盒子暂停定时器的自动播放

3.点击左右按钮用i++和i--实现左右分别播放

4.鼠标离开以后定时器恢复

this环境对象

环境对象本身也是个对象，指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

this到底指着谁，受当前环境的影响

每个函数里都有一个对象，举个例子：

 function fn(){
            console.log(this)
        }
        window.fn()

其实我们每次调用函数的函数名（）其实是缩写，完全应该是window.fn()，window在这里可以理解为整个浏览器

在这个函数里，this指的就是window这个对象

粗略地说，谁调用这个函数，这个函数的this指针就是谁，此时这个函数是浏览器调用的

const input = document.querySelector('input')
        input.addEventListener('keyup', function () {
            console.log(this);
        })

在这个文本框里，this就是input的对象，因为input调用了他

应用场景：

当我们完成一个事件的监听时，想对事件源本身做出样式的改变，就可以：

<!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>
        input {
            width: 200px;
            transition: all 0.5s;
        }

        input:focus {
            width: 300px;
        }
    </style>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keyup', function () {
            //console.log(this);
            this.style.backgroundColor='red'
//在键盘按完后，input自己的背景颜色变为红色
        })
    </script>
</body>

</html>