事件监听和this的拓展

最新推荐文章于 2024-10-10 09:56:47 发布

你想要那颗糖

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量168

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_50260510/article/details/129925432

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

一、事件监听

1.以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如点击按钮可以弹出警示框；比如鼠标经过显示下拉菜单等等；那我们怎么实现事件触发时 JavaScript 可以执行一些代码呢？---事件监听

2.事件发生后，想要执行的代码写到事件处理函数里面；当触发指定的事件时，则事件处理函数就会被执行；事件监听是将事件处理函数注册到元素对象身上。

3.事件监听也称为: 事件注册、事件绑定。事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应。比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

4.语法：元素对象.addEventListener('事件类型' , 事件处理函数)

5.注意：

（1）事件类型要加引号，小写

（2）函数是点击之后再去执行，每次点击都会执行一次

二、事件类型

事件类型的大小写敏感的字符串，统一用小写字母

1.鼠标事件类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件类型</title>
    <style>
        .box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        // 1.获取事件源
        const box = document.querySelector('.box')

        // 2.绑定事件
        // 1.鼠标点击  click
        box.addEventListener('click' , function(){
            console.log('鼠标点击了盒子')
        })

            // 2.鼠标进入   mouseenter
            box.addEventListener('mouseenter' , function(){
                console.log('鼠标进入了')
            })

            // 3.mouseleave
            box.addEventListener('mouseleave' , function(){
                console.log('鼠标移出')
            })

    </script>
</body>
</html>

2.键盘事件：

input事件和键盘事件代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input事件和键盘事件</title>
    <style>
        textarea {
            width: 300px;
            height: 30px;
            padding: 10px;
            border-color: transparent;
            outline: none;
            resize: none;
            background: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
    <script>
        // 获取元素
        const tx = document.querySelector('#tx')

        // 1. 键盘事件 
        // 1.1 键盘按下事件  keydown  当我们按下键盘的时候就触发
        tx.addEventListener('keydown', function () {
            console.log('我是keydown事件' + tx.value)
        })

        // 1.2 键盘弹起事件  keyup 当我们键盘弹起的时候就触发
        tx.addEventListener('keyup', function () {
            console.log('我是keyup事件' + tx.value)
        })

        // 2. 用户输入事件 input ，是表单value的值发生变化的时候触发
        tx.addEventListener('input', function () {
            console.log('我是input事件' + tx.value)
        })

    // 3. 注意事项
    // 3.1 执行顺序  keydown →  input   →  keyup
    // 3.2 keydown 无法获取最新的value， keyup和input可以得到用户输入内容

    </script>
</body>

</html>

3.焦点事件类型

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件</title>
    <style>
        [type=text] {
            width: 245px;
            height: 50px;
            padding-left: 20px;
            border: 1px solid #ccc;
            font-size: 17px;
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text" class="search-text">
    <input type="text" class="search">

    <script>
        // 获取焦点 fous
        // 1.获取事件源
        const search_text = document.querySelector('.search-text')

        // 1.2 绑定事件
        search_text.addEventListener('focus', function () {
            console.log('我获取焦点了')
        })

        // 1.3 失去焦点 blur
        search_text.addEventListener('blur', function () {
            console.log('失去了焦点')
        })

        // 2. 拓展 自动获得焦点 focus()    自动失去焦点 blur()
        // 2.1 语法: 元素.focus()  比如百度首页搜索框自动获得焦点
        const search = document.querySelector('.search')
        search.focus()
    </script>
</body>

</html>

三、事件对象

1.事件对象是什么？

也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法；例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

2.使用场景

（1）可以判断用户按下哪个键，比如按下回车键可以发布新闻

（2）可以判断鼠标点击了哪个元素，从而做相应的操作

3.语法：

（1）注册事件中，回调函数的第一个参数就是事件对象

（2）一般命名为event、ev、e

4.事件对象-常见属性

四、拓展知识

4.1 环境对象-this

1.环境对象：指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响

2.作用：弄清楚this的指向，可以让我们代码更简洁

3.函数的调用方式不同，this 指代的对象也不同

4.【谁调用， this 就是谁】是判断 this 指向的粗略规则

5.直接调用函数，其实相当于是 window.函数，所以 this 指代 window

4.2 排他思想

排他思想是一种思路，目的是突出显示某个元素；比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式

口诀：注意顺序

①：排除其他人

②：保留我自己

4.3 伪类选择器在全选上的应用

注意：伪类选择器只有一个冒号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器的应用</title>
    <style>
        /* 选择被勾选的复选框 */
        .ck:checked{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
</body>
</html>

效果展示：

伪类选择器的案例-全选

需求：

1.点击大的全选按钮时，小全选按钮会自动全部被选中

2.小的全选按钮都被选中以后，大的全选按钮也会自动被选中

代码展示：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选按钮</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid #ccc;
            margin: 200px auto;
            border-collapse: collapse;
        }

        th {
            font-size: 20px;
            font-weight: 900;
            background-color: pink;
        }

        th,
        td {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .all {
            margin-left: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
    <script>

    </script>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name=" " id="checkAll"><span class="all">全选</span>

            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>

    </table>

    <script>
        // 1.获取复选框
        const checkAll = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')

        // 2.点击大复选框
        checkAll.addEventListener('click', function () {
            // 得到当前大复选框的选中状态---检查
            // console.log(this.checked);  // true 或者 false
            // 3.便利小复选框，让小复选框的checked等于大复选框的checked
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = checkAll.checked
            }
        })

        // 3.小复选框全选时，大复选框也被选中，利用css的伪类选择器
        // 3.1 给所有的小复选框添加点击事件
        for(let i = 0 ; i < cks.length ; i++){
            cks[i].addEventListener('click' , function(){
                // 判断小复选框的个数是否等于总的小复选框个数
                // console.log(document.querySelectorAll('.ck:checked').length);
                checkAll.checked =document.querySelectorAll('.ck:checked').length === cks.length

            })
        }


    </script>

</body>

</html>

效果展示：