02-DOM-事件基础

最新推荐文章于 2022-10-19 16:09:55 发布

阿良_C

最新推荐文章于 2022-10-19 16:09:55 发布

阅读量844

点赞数

分类专栏： web api 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44941576/article/details/124077517

版权

web api 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM-事件基础

事件

事件监听

什么是事件？
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击一个按钮
什么是事件监听？
- 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMcXkjK4-1649571398631)(02-DOM-事件基础.assets/1649129032481.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9UBNDbK-1649571398633)(02-DOM-事件基础.assets/1649129283629.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bAoNYhIP-1649571398633)(02-DOM-事件基础.assets/1649129320082.png)]

代码展示

<body>
    <!-- 事件监听
    1.获取dom标签
    2.使用dom.addEventListener('动作',函数)
    -->
    <button class="but1">抽奖</button>
    <button class="but2">退出</button>
    <div></div>
    <script>


        let but1 = document.querySelector('.but1')
        // 注册事件
        but1.addEventListener('click', function () {
            console.log('开始抽奖');
        })
        let but2 = document.querySelector('.but2')
        but2.addEventListener('click', function () {
            console.log('退出抽奖');
        })

        let div = document.querySelector('div')
        div.addEventListener('mouseover', function () {
            console.log('小伙子,骨骼清奇');
        })
    </script>
</body>

事件监听三要素

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

案例

1.点击盒子，盒子隐藏

核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px, auto;

        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        div.addEventListener('click', function () {
            // 让盒子隐藏
            div.style.display = 'none'
        })
    </script>
</body>

2.随机点名

需求：点击开始随机抽取，点击结束输出结果

业务分析：

点击开始按钮随机抽取数组的一个数据，放到页面中
点击结束按钮删除数组当前抽取的一个数据
当抽取到最后一个数据的时候，两个按钮同时禁用

核心：利用定时器快速展示，停止定时器结束展示

<body>
    <h2></h2>
    <button class="btn1">开始抽选</button>
    <button class="btn2">幸运儿</button>
    <script>
        // 获取标签
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let h2 = document.querySelector('h2')
        let timeId;

        let arr = ['赵云', '张飞', '关羽', '刘备', '黄忠', '诸葛', '司马懿', '曹操']

        // 开始定时器
        btn1.addEventListener('click', function () {
            // 定时器
            // 计时器中有bug,点击多次会停不下来,需要disable来防止多次点击
            btn1.disabled = true;
            timeId = setInterval(() => {
                let index = Math.round(Math.random() * (arr.length - 1))
                h2.innerHTML = arr[index]
                // console.log('开始抽奖');
            }, 100);
        })


        // 清除定时器
        btn2.addEventListener('click', function () {
            btn1.disabled = false;
            clearInterval(timeId)
        })

    </script>
</body>

事件类型

案例

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化

分析：
①：全选复选框点击，可以得到当前按钮的 checked
②：把下面所有的小复选框状态checked，改为和全选复选框一致
③：如果当前处于选中状态，则把文字改为取消，否则反之

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnC7vSkx-1649571398634)(02-DOM-事件基础.assets/1649130008165.png)]

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

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px '微软雅黑';
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
</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>
        let checkAll = document.querySelector('#checkAll')
        let ck = document.querySelectorAll('.ck')


        // 需求1:点击全选复选框,所有的复选框都要选中
        checkAll.addEventListener('click', function () {
            checkAll.checked;
            console.log(checkAll.checked);
            for (let index = 0; index < ck.length; index++) {
                ck[index].checked = checkAll.checked
            }
        })


        //需求二:所有的复选框选中,全选复选框才会选中

        /* 思路:
        1.首先要给所有的复选框绑定点击事件 for
        2.每次点击复选框都要判断是否全部选中
         */
        for (let index = 0; index < ck.length; index++) {
            ck[index].addEventListener('click', function () {
                // 创建一个变量来表示全选是否选中
                let flag = true
                for (let index = 0; index < ck.length; index++) {
                    // 如果有复选框没有选中, 全选按钮就是false
                    if (!ck[index].checked) {
                        flag = false
                    }
                }
                checkAll.checked = flag
            }
            )

        }


    </script>
</body>

</html>

环境对象

定义

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

作用

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

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

排他思想

当前元素为A状态,其他元素为B状态

使用

干掉所有人

使用for循环
复活他自己

通过this或者下标找到自己或者对应的元素

案例

1.ul里面有5个li，点击li的时候，会变成红色，其余的li背景颜色不变

    <style>
        li {
            list-style: none;
            display: flex;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <ul>
        <li>动画片</li>
        <li>恐怖片</li>
        <li>战争片</li>
        <li>科幻片</li>
        <li>纪录片</li>
    </ul>
    <script>
        let list = document.querySelectorAll('li')
        for (let index = 0; index < list.length; index++) {
            list[index].addEventListener('click', function () {

                for (let j = 0; j < list.length; j++) {

                    list[j].style.backgroundColor = '#fff'

                }
                // this.style.backgroundColor = 'red'
                list[index].style.backgroundColor = 'red'
            })

        }
    </script>
</body>

list[index].addEventListener('click', function () {

            for (let j = 0; j < list.length; j++) {

                list[j].style.backgroundColor = '#fff'

            }
            // this.style.backgroundColor = 'red'
            list[index].style.backgroundColor = 'red'
        })

    }
</script>

阿良_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-DOM-事件基础

DOM-事件基础事件事件监听什么是事件？事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮什么是事件监听？就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMcXkjK4-1649571398631)(02-DOM-事件基础.assets/1649129032481.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片
复制链接

扫一扫