WebApi入门第三章（事件介绍及注册事件）

海海呐

已于 2022-06-29 09:36:09 修改

阅读量449

点赞数 3

分类专栏： WebAPI 文章标签： javascript

于 2021-08-15 21:17:57 首次发布

本文链接：https://blog.csdn.net/m0_56344602/article/details/119719737

版权

WebAPI 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript实现网页上的开关灯效果，通过点击按钮改变页面背景色和按钮文字。同时，讲解了禁用/启用所有输入框的功能，通过点击禁用或启用按钮，切换所有input元素的disabled属性。内容涵盖了事件处理、DOM操作和条件判断等基础知识。

摘要由CSDN通过智能技术生成

开关灯完整代码

<!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>
    <button>关灯</button>
    <script>
        // 需求：点击按钮：如果按钮是 关灯 将页面的背景色变黑，将开关变成 开灯；相反反着做即可
        /*
            思路分析
            1. 事件源：按钮 querySelector('button')
            2. 事件类型：点击事件 onclick
            3. 事件处理
            3.1 获取按钮的值：innerText
            3.2 获取body元素：querySelector('body') || document.body
            3.3 判定按钮的值
            * 关灯：背景色变黑，按钮的值变 开灯
            * 开灯：背景色变亮，按钮的值变 关灯
        */
        // 思路分析
        //     1. 事件源：按钮 querySelector('button')
        let btn = document.querySelector('button');
        // console.log(btn);
        //     2. 事件类型：点击事件 onclick
        btn.onclick = function () {

            //     3. 事件处理
            //     3.1 获取按钮的值：innerText
            // console.log(btn);
            let value = btn.innerText;
            //     3.2 获取body元素：querySelector('body') || document.body
            let body = document.body
            // console.log(body);
            //     3.3 判定按钮的值
            if (value == '关灯') {

                //     * 关灯：背景色变黑，按钮的值变 开灯
                body.style.backgroundColor = '#000';
                btn.innerText = '开灯';
            } else {
                //     * 开灯：背景色变亮，按钮的值变 关灯
                body.style.backgroundColor = ''
                btn.innerText = '关灯';
            }


        }

    </script>
</body>

</html>

事件介绍及注册事件

1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
  - box.onclick = function(){}
4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素 都可以注册很多个事件(点击，移入等)

禁用/启用按钮小练习

需求

1. 点击启用按钮，所有的input都可以使用：disabled = false

2. 点击禁用按钮，所有的input都不能使用：disabled = true

       /*
            禁用 思路分析
            1. 事件源： 禁用按钮 #jy
            2. 事件类型： 点击 onclick
            3. 事件处理
            3.1 获取所有input元素：querySelectorAll('input')
            3.2 遍历取出每个input
            3.3 给每个input 加上disabled属性 值为true
        */

效果图：

启用

禁用

完整代码

<!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">
    <br>
    <input type="password">
    <br>
    <input type="radio">
    <br>
    <input type="checkbox">
    <br>
    <input type="button" value="表单按钮">
    <hr>
    <button id="qy">启用</button>
    <button id="jy">禁用</button>
    <script>

        // 需求
        // 1. 点击启用按钮，所有 的input都可以使用：disabled = false
        // 2. 点击禁用按钮，所有 的input都不能使用：disabled = true


        /*
            禁用 思路分析
            1. 事件源： 禁用按钮 #jy
            2. 事件类型： 点击 onclick
            3. 事件处理
            3.1 获取所有input元素：querySelectorAll('input')
            3.2 遍历取出每个input
            3.3 给每个input 加上disabled属性 值为true
        */
        let jy = document.querySelector('#jy');
        let qy = document.querySelector('#qy');
        // 点击事件onclick
        jy.onclick = function () {
            //禁用所有input  
            // console.log(jy);点击jy就是禁用
            // 因为要点击禁用就禁用所有input所以用forEach遍历数组
            let inputs = document.querySelectorAll('input');
            inputs.forEach(function (inem) {
                // console.log(inem);
                // 禁用是disable
                inem.disabled = true
            })
        }



        qy.onclick = function () {
            //禁用所有input  
            // console.log(jy);点击jy就是禁用
            // 因为要点击禁用就禁用所有input所以用forEach遍历数组
            let inputs = document.querySelectorAll('input');
            inputs.forEach(function (inem) {
                // console.log(inem);
                // 禁用是disable
                inem.disabled = false;
            })
        }





    </script>
</body>

</html>