Web APIs 学习归纳2---事件基础&元素操作&节点操作

最新推荐文章于 2024-07-13 20:38:58 发布

SPIRIT_SYF

最新推荐文章于 2024-07-13 20:38:58 发布

阅读量978

点赞数 31

文章标签：学习

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/138186887

版权

本文详细介绍了JavaScript中事件的基础知识，包括事件源、事件类型和处理程序，以及如何通过DOM操作改变元素内容、属性，如密码输入框的显示与隐藏、样式修改和深浅模式切换的示例。

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

上一节我们学习了如何选择我们所需要的元素对象，或者元素对象集合。这一节基于选出的对象，进行事件的添加。

一、事件基础

1.1 什么是事件

事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。

最常见的就是：我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1.2 事件三要素

1. 事件源（谁触发了这个事件）

2. 事件类型（什么事件）

3. 事件处理程序（做什么操作）

这里做一个最简单的案例，点击按钮，弹出一个警示框：

分析：1、事件源：按钮；2、事件类型：鼠标点击；3、事件处理：弹出警示框。

<body>
    <button id="btn">按钮</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert("事件触发了")

        }
    </script>
</body>

1.3 执行事件的步骤

其实就是由事件的三要素决定的：

1、获取事件源---解决事件源

2、注册事件（绑定事件）---解决事件类型

3. 添加事件处理程序（采取函数赋值形式）---解决处理程序

二、元素操作

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。

2.1 改变元素内容

1、element.innerText（）；从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去；

2、element.innerHTML（）；起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2.2 元素常用的属性操作

1、内容： innerText、innerHTML

2、链接：src、href

3、标签中的常见内容：id、alt、title

2.3 表单< input >元素的属性操作

利用 DOM 可以操作如下表单元素的属性：type、value、checked、selected、disabled

举例，只允许提交一次：

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function () {
            // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '内容已提交，不可再提交';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

再举一个很重要的案例，密码输入框的显示与隐藏：

案例分析：1、抓取图片、密码栏.2因为需要切换模式所以需要一个标识符flag。3、切换input的type是text 或是 password。

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        // 2. 注册事件 处理程序
        eye.onclick = function () {
            // 3.点击一次之后， flag 一定要变化

            if (flag == 0) {
                pwd.type = 'text';
                eye.src = "images/open.png";
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = "images/close.png";
                flag = 0;
            }
        }

    </script>
</body>

2.4 样式style属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样。

1、element.style 是行内样式操作。所以优先级非常高。

2、element.className 类名样式操作。通过给对象改变类名修改样式。

注意：

1. JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor

2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

3、如果样式修改较多，可以采取操作类名方式更改元素样式。

4、 class因为是个保留字，因此使用className来操作元素类名属性

5、 className 会直接更改元素的类名，会覆盖原先的类名

案例：关闭广告

案例分析：1、获取盒子对象，按钮对象。2、按钮一旦onclick，执行盒子.style.display= ‘none’；

<body>
    <div class="box">
        二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        // 1. 获取元素 
        //注意是数组所以要用【】
        var btn = document.getElementsByClassName('close-btn');
        var box = document.getElementsByClassName('box');
        // 2.注册事件 程序处理
        btn[0].onclick = function () {
            box[0].style.display = 'none';
        }
    </script>
</body>

案例：精灵图的使用（需要图片按照一定规律排布）

案例分析：1、创建一个大盒子，里面都是浮动的li，li的背景图片是精灵图。2、获取所有的li，然后对backgroundPosition进行设置。

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

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

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            /* 精灵图需要竖着排，方便计算 */
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var temp = i * 44;
            // 'x y'  所以 'x -' + temp +'px'
            lis[i].style.backgroundPosition = '0 -' + temp + 'px';
        }
    </script>
</body>

</html>

2.5 通过className更改元素样式

因为是通过改变类型实现属性的改变，所以预先设置好需要的类型。

<style>
        .first {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>

有两种做法：

第一种做法，直接改变到新的类型。

// 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
   this.className = 'change';

第二种，保留原有类型，并改变类型；（有相同执行后面的，没有就补充设置）

// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
    this.className = 'first change';

案例（重要）：注册界面的密码设置判断

先给出一些CSS设置

    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }

        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>

案例分析：1、获取密码栏、获取信息提示栏；2、密码栏绑定onblur失焦事件，当失焦以后，判断密码栏的value.length是否满足要求。3、对于信息提示栏的修改，采用className 设置，因为修改的内容很多。

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var mess = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function () {
            if (ipt.value.length < 6 || ipt.value.length >= 16) {
                mess.className = 'message wrong';
                mess.innerHTML = '输入错误';
            } else {
                mess.className = 'message right';
                mess.innerHTML = '输入正确';
            }
        }
    </script>
</body>

案例：深浅模式切换

案例分析：1、获取按钮、获取body；2、因为需要不停切换，所以还需要一个标识符；3、预先设置flag的值，保证第一次进入事件操作，就可以按照要求转换。4、每次点击按钮，改变flag和按钮内部的内容。

<body>
    <button class="btn">切换为深色模式</button>
    <script>
        var btn = document.querySelector('.btn');

        var flag = 0;
        btn.onclick = function () {

            if (flag == 0) {
                document.body.style.backgroundColor = 'black';
                flag = 1;
                this.innerHTML = '切换为浅色模式';

            } else {
                document.body.style.backgroundColor = 'white';
                flag = 0;
                this.innerHTML = '切换为深色模式';
            }
        }

    </script>
</body>

SPIRIT_SYF

关注

31
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
Web APIs 学习归纳2---事件基础&元素操作&节点操作

事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。最常见的就是：我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
复制链接

扫一扫