07-JavaScript DOM事件

最新推荐文章于 2024-06-15 22:34:37 发布
最新推荐文章于 2024-06-15 22:34:37 发布
阅读量25 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfp020907/article/details/132437332
版权

 事件三要素
         事件源
         事件类型
         事件处理程序

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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background: skyblue;
            overflow: auto;
        }

        .box1 {
            width: 100px;
            height: 600px;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script>
        // 事件三要素
        // 事件源
        // 事件类型
        // 事件处理程序

        //获取元素
        var box = document.getElementsByTagName('div')[0];

        // onmouseover 鼠标刚进入元素时触发
        // box.onmouseover = function () {
        //     console.log('鼠标刚进入');
        // }

        // onmouseenter 鼠标完全进入时触发
        // box.onmouseenter = function () {
        //     console.log('鼠标完全进入元素');
        // }

        // onmouseover 和 onmouseenter 的区别：是否触发冒泡事件

        // onmousemove 鼠标在元素上移动时触发
        // box.onmousemove = function () {
        //     console.log('鼠标移动触发');
        // }

        // onmouseout 鼠标刚要离开元素时触发
        // box.onmouseout = function () {
        //     console.log('我走了');
        // }

        // onmouseleave 鼠标完全离开元素时触发
        // box.onmouseleave = function () {
        //     console.log('我真走了');
        // }

        // onmouseout 和 onmouseleave 区别：是否触发冒泡事件

        // onmousedown 鼠标按下时触发
        // box.onmousedown = function () {
        //     console.log('鼠标按下');
        // }

        // onmouseup 鼠标弹起时触发
        // box.onmouseup = function () {
        //     console.log('鼠标弹起');
        // }

        // onclick 鼠标单击事件
        // box.onclick = function () {
        //     console.log('单击事件');
        // }

        // ondblclick 鼠标双击事件
        // box.ondblclick = function () {
        //     console.log('双击66');
        // }

        // onmousewheel 鼠标滚轮滚动时触发
        // box.onmousewheel = function () {
        //     console.log('车轮滚滚');
        // }

        // onscroll 当元素滚动条被滚动时触发
        // box.onscroll = function () {
        //     console.log('滚动条动了');
        // }

        // oncontextmenu 当用户点击鼠标右键打开菜单时触发
        box.oncontextmenu = function () {
            console.log('你想干啥？');
        }
    </script>
</body>

</html>

2.事件对象 event

event.target  获取事件源

event.stopPropagation()  阻止事件传播（阻止事件冒泡）;

event.preventDefault()  阻止触发默认事件

........

<!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>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid orange;
        }

        .son {
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <a href="https://www.baidu.com">点击跳转</a>
    <script>
        // 事件对象
        var box = document.getElementsByClassName('box')[0];
        var son = document.getElementsByClassName('son')[0];

        box.onclick = function (event) {
            event.stopPropagation();
            console.log(box);
            console.log(event);

            //target 事件的触发者
            console.log(event.target);
        }

        son.onclick = function (event) {
            // 阻止事件传播（阻止事件冒泡）
            event.stopPropagation();
            console.log(son);
        }

        var oa = document.getElementsByTagName('a')[0];
        oa.onclick = function (event) {
            // 阻止默认事件
            event.preventDefault();
        }
    </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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid orange;
        }

        .son {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        // 事件冒泡
        // 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制
        // 在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素
        // 触发该事件，以此类推，直到到达最外面的元素。

        var box = document.getElementsByClassName('box')[0];
        var son = document.getElementsByClassName('son')[0];

        // 绑定相同的事件处理程序
        // box.onclick = function () {
        //     console.log('爸爸');
        // }
        // son.onclick = function () {
        //     console.log('儿子');
        // }

        // box.onmouseover = function () {
        //     console.log('爸爸');
        // }
        // son.onmouseover = function () {
        //     console.log('儿子');
        // }


        // box.onmouseenter = function () {
        //     console.log('爸爸');
        // }
        // son.onmouseenter = function () {
        //     console.log('儿子');
        // }

        //onmouseover(onmouseout) 会触发冒泡事件，onmouseenter(onmouseleave) 不会触发冒泡事件

        //鼠标刚进入（离开）会触发冒泡事件，鼠标完全进入（离开）不会触发冒泡事件
        box.onmouseleave = function () {
            console.log('爸爸');
        }
        son.onmouseleave = function () {
            console.log('儿子');
        }


    </script>
</body>

</html>

4.事件中的this指向

事件中的this指向事件源

<!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>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid orange;
        }

        .son {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        var box = document.getElementsByClassName('box')[0];
        var son = document.getElementsByClassName('son')[0];

        // this指向问题
        // 1.普通函数 this 默认指向 window
        // 2.构造函数 this 指向实例化对象
        // 3.对象方法中的 this，指向该方法所属对象
        // 4.事件中的 this 指向事件源
        box.onclick = function () {
            console.log(box);
            console.log(this);
        }
    </script>
</body>

</html>

5.循环绑定事件

<!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;
            list-style: none;
        }

        li {
            width: 100px;
            height: 50px;
            border: 2px solid yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var oli = document.getElementsByTagName('li');

        // 循环绑定事件
        for (var i = 0; i < oli.length; i++) {
            oli[i].onclick = function () {
                console.log(this);
            }
        }
    </script>
</body>

</html>

6.表单事件

<!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>
</head>

<body>
    <form action="">
        <input type="text">

        <!-- 提交 -->
        <input type="submit">
        <!-- 重置 -->
        <input type="reset">
    </form>

    <script>
        // 获取节点
        var inp = document.getElementsByTagName('input')[0];
        var oform = document.getElementsByTagName('form')[0];


        // 1.onchange 内容改变事件（当输入框失焦，才代表输入结束，才会触发）
        inp.onchange = function () {
            console.log('内容改变了');
        }

        // 2.onfocus  获取焦点时触发
        inp.onfocus = function () {
            console.log('获取焦点');
        }

        // 3.onblur 失去焦点时触发
        inp.onblur = function () {
            console.log('失去焦点');
        }

        // 4.oninput 输入事件（正在输入）
        inp.oninput = function () {
            console.log('正在输入');
        }

        // 5.onsubmit 表单提交事件
        oform.onsubmit = function () {
            console.log('提交');
        }

        // 6.onreset 表单重置事件
        oform.onreset = function () {
            console.log('重置');
        }
    </script>
</body>

</html>

7.表单事件应用场景

<!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>
        div {
            width: 233px;
            height: 150px;
            position: relative;
        }

        span {
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <input type="text">
    <div>
        <textarea name="" id="" cols="30" rows="10" maxlength="300"></textarea>
        <span>0/300</span>
    </div>
    <script>
        var inp = document.getElementsByTagName('input')[0];
        var text = document.getElementsByTagName('textarea')[0];
        var osp = document.getElementsByTagName('span')[0];

        // 在输入结束之后拿到输入框的值
        inp.onchange = function () {
            console.log(inp.value);
        }

        // 在获取焦点之后
        inp.onfocus = function () {
            console.log('获取焦点');
            console.log('展示搜索记录');
            console.log('清楚提示信息');
        }

        // 实时监听用户输入
        text.oninput = function () {
            console.log(text.value.length);
            osp.innerHTML = text.value.length + '/300';
        }
    </script>
</body>

</html>

8.键盘事件

<!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>
</head>

<body>
    <script>
        // 键盘按下事件
        // window.onkeydown = function (e) {
        //     console.log('键盘按下');
        //     console.log(e.key);

        //     // 触发键盘按下事件的键码
        //     console.log(e.keyCode);

        //     if (e.keyCode == 13) {
        //         console.log('按下回车要执行的代码');
        //     }
        // }

        // // 键盘弹起事件
        // window.onkeyup = function () {
        //     console.log('键盘弹起');
        // }

        // 键盘按着不放事件
        window.onkeypress = function (e) {
            console.log("按着" + e.key + "不松手");
        }
    </script>
</body>

</html>

9.窗口事件

<!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>
</head>

<body>
    <script>
        // onload 当文档和资源文件加载完成时触发
        window.onload = function () {
            console.log('加载完成');
        }

        // onresize 窗口大小发生变化时触发
        window.onresize = function () {
            console.log("窗口发生变化");
        }

        // onunload 关闭网页时触发
        window.onunload = function () {
            console.log('拜拜');
        }
    </script>
</body>

</html>

10.注册处理事件绑定程序

<!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>
</head>

<body>
    <div>灯光下有两个影子，一个是我的，另一个也是我的</div>
    <script>
        var box = document.getElementsByTagName('div')[0];

        // 通过“on” 绑定事件，相同事件只能执行一个
        // box.onclick = function () {
        //     alert('说的真好！');
        // }
        // box.onclick = function () {
        //     alert('才怪');
        // }

        // addEventListener() 可以添加多个相同的事件
        box.addEventListener('click', function () {
            alert('说的真好！');
        })
        box.addEventListener('click', function () {
            alert('才怪！');
        })

    </script>
</body>

</html>

11.浏览器兼容性绑定事件

<!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>
</head>

<body>
    <div>点击</div>
    <script>
        function addMyEvent(ele, type, fun) {
            // 标准浏览器
            if (ele.addEventListener) {
                ele.addEventListener(type, fun);
            } else if (ele.attachEvent) {   //如果有attachEvent 方法，代表是 IE浏览器
                ele.attachEvent('on' + type, fun);
            } else {
                ele['on' + type] = fun;
            }
        }

        // 获取节点
        var box = document.getElementsByTagName('div')[0];
        addMyEvent(box, 'click', function () {
            console.log(this);
        })
    </script>
</body>

</html>

12.事件的传递过程

<!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>
</head>

<body>
    <script>
        // 事件的传递过程  事件流
        // 三个阶段 1.事件捕获   2.目标阶段   3.事件冒泡

        // 1.‘捕获阶段’：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事 
             件，直到达到目标节点
        // 2.‘目标（target）阶段’：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目 
              标事件的监听器后，就会运行该监听器
        // 3.‘事件冒泡’：当为多个嵌套元素设置了相同的事件处理程序，它们将触发冒泡机制。在冒泡 
              事件中，最内部的元素将首先触发其事件，然后栈内下一个元素触发该事件，以此类推，直 
              到达到最外面的元素。如果把事件处理程序指定 给所有的元素，那么这些事件将依次触发
    </script>
</body>

</html>

13.阻止默认事件

<!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>
</head>

<body>
    <a href="https://www.baidu.com">点击跳转百度</a>
    <script>
        var oa = document.getElementsByTagName('a')[0];
        oa.onclick = function (e) {
            //   阻止默认事件
            
            // e.preventDefault();
            return false;
        }
    </script>
</body>

</html>

14.事件委托

<!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;
            list-style: none;
        }

        ul {
            width: 100px;
            height: 1000px;
        }

        li {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        // 事件委托 ：将原本绑定在子元素身上的事件，绑定在父元素身上，利用事件冒泡传递的过程来触发当前的事件，
        // 这样的作法叫做事件委托，也叫事件代理
        var oul = document.getElementsByTagName('ul')[0];

        oul.onmouseover = function (e) {
            console.log(e.target);
            e.target.style.backgroundColor = 'pink';
        }
        oul.onmouseout = function (e) {
            console.log(e.target);
            e.target.style.backgroundColor = 'transparent';
        }
    </script>
</body>

</html>

yfp020907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jest-environment-jsdom-sixteen
04-28
如果您需要比Jest随附的JSDOM更新的JSDOM，请使用npm install --save-dev jest-environment-jsdom-sixteen或yarn add jest-environment-jsdom-sixteen --dev来安装此软件包，然后编辑Jest像这样的配置： { " test...
JavaScript DOM 添加事件
10-30
是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！
Javascript--DOM.rar_javascript
09-24
js-dom详解:javascript操作dom的介绍文档。
jest-environment-jsdom-latest:玩笑环境使用最新的jsdom API和功能
04-29
npm install jest-environment-jsdom-latest 用法 在index.spec.js或任何版本中： /** * @jest -environment jsdom-latest */ test ( 'use the latest jsdom features in this test file' , ( ) => { const ...
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1334
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 449
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1248
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 266
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 184
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
vue3：实现图片放大浏览功能组件
qq_45820271的博客
06-15 94
本文介绍了如何在vue3种实现一个放大预览图片效果的组件
Python私教张大鹏 Vue3整合AntDesignVue之Menu 导航菜单
Python私教
06-11 495
何时使用 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 更多布局和导航的使用可以参考：通用布局。 开发者注意事项 Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。 Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。 必须为 SubMenu 设置唯
TS:元组
fury的博客
06-15 258
元组（Tuple）是一种数据结构，类似于数组，但与数组不同的是，元组中的元素类型可以各不相同，且元组的长度是固定的。- **固定类型**：元组中每个位置的元素类型在定义时确定，之后不能改变。3. **多维坐标**：例如表示三维空间的坐标 `[x, y, z]`。3. **顺序相关**：元组中的元素是有序的，可以通过索引访问。1. **类型安全**：元素类型固定，能提供更好的类型检查。- **固定长度**：元组的长度在定义时确定，之后不能改变。2. **多种类型**：元组中的每个元素可以是不同的类型。
使用 Vue CLI 脚手架生成 Vue 项目
最新发布
修己xj的博客
06-15 578
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构，还集成了常用的开发工具和配置，使得开发者可以专注于业务逻辑的实现，而不需要花费大量时间在项目配置上。
如何在CSS中添加自定义属性
ggq53219的博客
06-14 159
你还可以在JavaScript中读取和修改自定义属性。这些属性将作为CSSStyleDeclaration对象上的属性被暴露出来，但它们的名称不包含。注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。如果引用的属性不存在或无效，你可以提供一个回退值（fallback value）。）或任何其他的CSS选择器内部定义自定义属性。
vue-router的导入和使用
codemami的博客
06-11 489
在你的 Vue 组件中，你可以使用 <router-link> 来创建链接，当用户点击这些链接时，视图会自动更新为对应路由所映射的组件。现在，当你点击 "Home" 或 "About" 链接时，<router-view> 的内容会自动更新为对应的组件。在你的主文件（通常是 main.js 或 main.ts）中，你需要导入 Vue 和 vue-router。然后，你可以使用 routes 配置来创建一个 router 实例，并将其传递给 Vue 的根实例。接着，你需要定义你的路由。
【算法篇】大数加法JavaScript版
遇见小美好
06-09 295
大数加法算法题JavaScript版
javascript事件和dom操作
07-28
通过JavaScript事件和DOM操作，我们可以实现网页的交互功能，比如点击按钮弹出确认框、表单验证、动态修改网页内容等。 #### 引用[.reference_title] - *1* *3* [JavaScript基础: DOM操作中常用事件]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值