前端研习录（30）——JavaScript 事件讲解及示例分析

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量263 收藏
点赞数
分类专栏： 前端研习录 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXKKang/article/details/126336816
版权

前端研习录（30）——JavaScript 事件讲解及示例分析

版权声明

  • 本文原创作者：清风不渡
  • 博客地址：https://blog.csdn.net/WXKKang

  重拾前端记忆，记录学习笔记，现在进入JavaScript 事件部分

一、事件处理程序

  事件处理程序分为以下三种：

  • HTML事件处理
  • DOM0级事件处理
  • DOM2级事件处理

  示例如下：

<!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>
</head>
<body>
    
    <button onclick="clickHandle()">HTML事件按钮</button>

    <button id="btn">DOM0级按钮</button>
    
    <button id="btn1">DOM2级按钮</button>

    <script>
        // HTML事件
        function clickHandle() {
            alert("点击了HTML事件按钮");
        }

        // DOM0级事件
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("点击了DOM0级按钮A");
        }
        btn.onclick = function(){
            alert("点击了DOM0级按钮B");
        }
 
        // DOM2级事件
        var btn1 = document.getElementById("btn1")
        btn1.addEventListener("click",click1);
        btn1.addEventListener("click",click2);
        btn1.removeEventListener("click",click3)


        function click1() {
            alert("第一次DOM2级事件");
        }
        function click2() {
            alert("第二次DOM2级事件");
        }
        function click3() {
            alert("第三次DOM2级事件");
        }
    </script>

</body>
</html>

  效果如下，点击HTML事件按钮:
在这里插入图片描述

  点击DOM0级按钮，可以看到“点击了DOM0级按钮A”提示并没有展示，如下：

在这里插入图片描述

  点击DOM2级按钮，依次出现以下两种提示：

在这里插入图片描述

在这里插入图片描述
  

  由此可以得出以下结论：
  

HTML事件的缺点：HTML与JS代码没有分开
  
DOM0级事件的优点：HTML与JS代码是分离的。缺点：存在多个事件会进行覆盖
  
DOM2级事件的优点：存在多个事件不会进行覆盖，会依次执行

二、鼠标事件

  鼠标事件指与鼠标相关的事件，具体的事件列举如下：

  • click：按下鼠标时触发
  • dblclick：在同一个元素上双击鼠标时触发
  • mousedown：按下鼠标键时触发
  • mouseup：释放按下鼠标键时触发
  • mousemove：当鼠标在节点内部移动时触发，当鼠标持续移动时，该事件会触发
  • mouseenter：当鼠标进入一个节点时触发，进入子节点不会触发这个事件
  • mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
  • mouseover：鼠标进入一个节点时触发，进入子节点时会再一次触发这个事件
  • mouseout：鼠标离开一个节点时触发，离开父节点时也会触发这个事件
  • wheel：滚动鼠标的滚轮时触发

注意：这些方法在使用的时候，除了DOM2级事件，都要添加on前缀

  示例如下：

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            margin-top: 30px;
        }
    </style>
</head>
<body>

    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">按下</button>
    <button id="btn4">释放</button>

    <div id="box1" class="box1"></div>

    <div id="root1" class="box2">
        <div id="box2" class="box1"></div>
    </div>

    <div id="root2" class="box2">
        <div id="box2" class="box1"></div>
    </div>

    <div id="root3" class="box2"></div>



    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var box1 = document.getElementById("box1");
        var root1 = document.getElementById("root1");
        var root2 = document.getElementById("root2");
        var root3 = document.getElementById("root3");

        btn1.onclick = function(){
            console.log("鼠标单击打印");
        }

        btn2.ondblclick = function(){
            console.log("鼠标双击打印");
        }

        btn3.onmousedown = function(){
            console.log("鼠标按下打印");
        }

        btn4.onmouseup = function(){
            console.log("鼠标释放打印");
        }

        box1.onmousemove = function(){
            console.log("鼠标移动打印");
        }

        root1.addEventListener("mouseenter",enter1);
        root1.addEventListener("mouseleave",leave1)

        function enter1() {
            console.log("鼠标进入打印A");
        }

        function leave1() {
            console.log("鼠标离开打印A");
        }

        root2.addEventListener("mouseover",over1);
        root2.addEventListener("mouseout",out1)

        function over1() {
            console.log("鼠标进入打印B");
        }

        function out1() {
            console.log("鼠标离开打印B");
        }

        root3.onwheel = function(){
            console.log("滑动滚轮");
        }

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

三、Event事件对象

  事件发生后，会产生一个事件对象，作为参数传递给监听函数，如下：

<!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>
    <button id="btn1">单击按钮</button>

    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function(event){
            console.log(event);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

1、Event对象属性

（1）Event.target

  Event.target 属性返回事件当前所在节点，示例如下：

<!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>
    <button id="btn1">单击按钮</button>

    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function(event){
            console.log(event.target);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

（2）Event.type

  Event.type属性返回一个字符串，表示事件类型，该属性只读，示例如下：

<!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>
    <button id="btn1">单击按钮</button>

    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function(event){
            console.log(event.type);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

2、Event对象方法

（1）Event.preventDefault

  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>
</head>
<body>
    <a href="https://www.baidu.com/" id="baidu">前往百度</a>

    <script>
        var baidu = document.getElementById("baidu");
        baidu.onclick = function(event){
            event.preventDefault();
            console.log("点击了a标签");
        }
    </script>
</body>
</html>

  结果如下，点击a标签不会进行页面跳转，且继续执行下面的js代码：

在这里插入图片描述

（2）Event.stopPropagation

  Event.stopPropagation 方法用于阻止事件在DOM中继续传播，防止再触发定义在别的节点上的事件监听函数，但是不包括在当前节点其他的事件监听函数，示例如下：
  
  如果没有使用Event.stopPropagation方法时：

<!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>
        .root{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }

    </style>
</head>
<body>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>

    <script>
        var root = document.getElementById("root");
        var box = document.getElementById("box");

        root.onclick = function(){
            console.log("点击了root");
        }

        box.onclick = function(){
            console.log("点击了box");
        }
    </script>
</body>
</html>

  结果如下，点击box会触发父节点root的监听函数：

在这里插入图片描述

  使用Event.stopPropagation方法防止再触发定义在别的节点上的事件监听函数，代码如下：

<!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>
        .root{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }

    </style>
</head>
<body>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>

    <script>
        var root = document.getElementById("root");
        var box = document.getElementById("box");

        root.onclick = function(){
            console.log("点击了root");
        }

        box.onclick = function(e){
            e.stopPropagation();
            console.log("点击了box");
        }
    </script>
</body>
</html>

  结果如下，点击box只触发本节点的监听函数：

在这里插入图片描述

四、键盘事件

  键盘事件由用户敲击键盘时触发，主要有一下三个事件：

  • keydown    按下键盘时触发
  • keypress    按下有值的键时触发
  • keyup    松开键盘时触发

注意：对于keypress，按下Ctrl、Alt、Shift、Meta这样无值的键时不会触发；而对于有值的键，按下时先触发keydown事件，再触发这个事件

  示例如下：

<!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>
</head>
<body>
    <input type="text" id="user">

    <script>
        var user = document.getElementById("user");
        user.onkeydown = function (){
            console.log("按下了键盘");
        }

        user.onkeypress = function(){
            console.log("按下了有值的键");
        }

        user.onkeyup = function(e){
            console.log("松开了键盘");
            console.log("输入的内容是："+e.target.value);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

1、event对象

  keyCode：唯一标识，可通过此属性判断按下了什么键，示例如下：

<!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>
</head>
<body>
    <input type="text" id="user">

    <script>
        var user = document.getElementById("user");
        user.onkeydown = function (e){
            console.log("按下了键盘");
            if (e.keyCode === 13){
                console.log("按下了回车");
            }
        }
    </script>
</body>
</html>

  在输入框敲击回车时，结果如下：

在这里插入图片描述

五、表单事件

  表单事件是在使用表单元素及输入框元素可以监听的一系列事件

  • input事件
  • select事件
  • Change事件
  • reset事件
  • submit事件

1、input事件

  input事件 当<input>、<select>、<textarea>的值发生变化时触发。对于复选框<input type=“checkbox”>或单选框<input type=“radio”>，用户改变选项时，也会触发这个事件

input事件的一个特点就是可以连续触发，比如用户每按下一次按键，就会触发一次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>清风不渡</title>
</head>
<body>
    <input type="text" id="user">

    <script>
        var user = document.getElementById("user");
        user.oninput = function (e) {
            console.log(e.target.value);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

2、select事件

  select事件当在<input>、<textarea>里面选中文本时触发，示例如下：

<!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>
</head>
<body>
    <input type="text" id="user">

    <script>
        var user = document.getElementById("user");
        user.onselect = function (e) {
            console.log(e.target.value);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

3、Change事件

  Change事件 当<input>、<select>、<textarea>的值发生变化时触发。

它与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>清风不渡</title>
</head>
<body>
    <input type="text" id="user">

    <script>
        var user = document.getElementById("user");
        user.onchange = function (e) {
            console.log(e.target.value);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

4、reset事件和submit事件

  这两个事件发生在表单对象<form>上，而不是发生在表单成员上
  reset事件当表单重置（所有表单成员变回默认值）时触发
  submit事件当表单数据向服务器提交时触发。

注意：submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮

  示例如下：

<!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>
</head>
<body>
    <form id="myForm">
        <input type="text" name="user">
        <button id="resetBtn">重置</button>
        <button>提交</button>
    </form>
        
    <script>
        var myForm = document.getElementById("myForm");
        var resetBtn = document.getElementById("resetBtn");
        resetBtn.onclick = function (){
            myForm.reset();
        }

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

六、事件代理

  由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）

  事件会在冒泡阶段向上传播到父节点，示例如下：

<!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>
</head>
<body>
    <ul id="list">
        <li>列表一</li>
        <li>列表二</li>
    </ul>

    <script>
        var list = document.getElementById("list");
        list.onclick = function(){
            console.log("list点击事件");
        }
    </script>
</body>
</html>

  结果如下，我们点击<li>标签时会触发父节点的点击事件：

在这里插入图片描述

  所以如果当我们需要给父元素下的子元素添加监听函数时，可以利用这个特性，而不用一个个的去对子元素添加监听函数，示例如下：

<!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>
</head>
<body>
    <ul id="list">
        <li>列表一</li>
        <li>列表二</li>
        <p>p标签</p>
    </ul>

    <script>
        var list = document.getElementById("list");
        list.onclick = function(e){
            if (e.target.tagName === "LI"){
                console.log("点击了li标签");
            }else{
                console.log("点击的不是li标签");
            }
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述
  也可以通过toLowerCase()转化为小写进行判断：

<!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>
</head>
<body>
    <ul id="list">
        <li>列表一</li>
        <li>列表二</li>
        <p>p标签</p>
    </ul>

    <script>
        var list = document.getElementById("list");
        list.onclick = function(e){
            if (e.target.tagName.toLowerCase() === "li"){
                console.log(e.target.innerHTML);
                console.log("点击了li标签");
            }else{
                console.log("点击的不是li标签");
            }
        }
    </script>
</body>
</html>
清风不渡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DevOps研习社:品质决定成败——漫谈非功能性需求
02-24
在互联网的世界里，“用户就是上帝”这句话只体现在支付环节。而在日常生活中，几乎每一个人都清楚的知道，不论是产品还是服务，品质决定竞争力，而对于一个软件、应用或者App来说，功能是生命线，确定能否安身立命...
前端专题 新手JavaScript的基本使用+案例
weixin_44131922的博客
08-08 256
JavaScript介绍 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 内容 JavaScript基本语法 JavaScript对象获取 JavaScript获取标签内容 JavaScript操作标签属性 JavaScript事件绑定 JavaScript（简称JS）引入方式 第一种
【前端笔记】二、JavaScript实例
小王同学的博客
07-25 577
先搭一个界面 <header> <h2>聊天机器人</h2> </header> <ul class="message-list" id="message-list"> <li class="message-list__item-robot"><div> 你好，我是聊天机器人 </div></li> <li class="message-list__item-use
好程序员web前端分享js实现实战案例
cique2620的博客
05-06 169
好程序员 web 前端分享 js 实现 实战案例， 实际开发中有要求用户一些行为每天一次，次日开始重新回复功能，一般前端都是通过 ...
前端学习当中的一些js案例
weixin_46247854的博客
04-04 340
js的小案例
React 进阶（四）事件详解
weixin_34367845的博客
03-21 155
自由组件与受控组件 自由组件是指值不受Reactstate控制的form元素，而受控组件指的是值被Reactstate所控制的form元素 import React, {Component} from "react"; import "./App.css"; // import PropTypes from 'prop-types'; class ControllerComponent exten...
汽车手套箱研习 PPT——22页.rar
09-19
【标题】"汽车手套箱研习 PPT——22页.rar"揭示了这是一份关于汽车手套箱设计和工程实践的演示文稿，总计22页。这份文档可能包含了对汽车内部存储空间——手套箱的深入研究，涵盖了设计原理、功能实现、材料选择以及...
陈安之超级成功学及研习会记录
11-13
大家都知道，帮举手的人都很少，成功的原因很容易，也很简单，但是很容易做的事情也很容易不去做它，擦皮鞋简不简单，可是也很容易不去做它，很简单的道理，我们今天讲的东西够不够简单。简单！...
陈安之研习会记录
12-17
《陈安之研习会记录》是一份珍贵的资料，主要涵盖了知名成功学导师陈安之在研习会上分享的智慧与经验。这份文档详细记录了陈安之的讲授内容，旨在帮助读者理解并应用他的成功理念，提升个人的成长与事业发展。 ...
前端必备JS开发16个经典实例
04-12
前端必备JS开发16个经典实例 ,资源为教学视频，格式为MPG4.
web前端开发常用的几个js效果
csdn_chenli
05-26 3265
web前端开发常用的几个js 一.table换行奇数和偶数行不同的颜色 二.input type=“text” 文本里面的默认字体颜色和获取焦点后的字体颜色变换 三.iframe 自适应调用页面的宽度和高度 源代码： 实例1table换行奇数和偶数行不同的颜色     function load()             {                
大事件前端项目
一只卑微的菜狗的博客
08-20 1563
本项目名为大事件。使用了jQuery和Ajax对数据进行交互，调用后台接口实现。前端使用LayUI框架、模板引擎art-template以及jQuery插件实现。 完整的代码链接： https://github.com/vivienWei/web_bigevent 实现的功能有： 登录，首页，文章类别，文章列表，发表文章，更换头像，上传头像等功能 实现效果图如下： 登录页面： 首页： 如果用户没有登录就进入本页面，通过调用后台接口的身份认证标识，判断是否有登录标识，没有就会跳转.
WEB前端 -- 实例
热门推荐
叶的博客
03-04 1万+
1.隔行变色&lt;script&gt; /*$('#table tr:even').css('background','#abcdef'); $('#table tr:odd').css('background','yellow');*/ $('#table tr').filter(':even').css('background','#abcdef').end().filter(':odd'...
前端js代码实例
weixin_38933973的博客
03-26 772
三级select下拉动态更新： @RequestMapping(value = "manage", method = { RequestMethod.GET, RequestMethod.POST })public String manage(HttpServletRequest request, ModelMap context) { CommonResult<JSONAr...
【jQuery】之事件
weixin_33923148的博客
09-09 49
jQuery 事件 1.页面加载 以DOM提供的load事件和jQuery中的ready()方法来加载页面 <script> window.onload = function () { var qyc = document.getElementById('qyc'); ...
前端-js- demo-作品集
程序员
01-28 8292
http://jikeytang.github.io/ 这是作品集效果实例。 源码贴在后面的系列中
从零开始学前端 - 33. JS事件详解
qq_39506551的博客
10-14 286
从零开始学前端 - 33. JS事件详解 三、事件流 3.1 事件冒泡 3.2 事件捕获 四、事件对象 五、事件委托 事件流指的就是事件发生的执行顺序，`DOM2级事件` 规定的事件流包括三个阶段：**事件捕获阶段**、**处于目标阶段** 和 **事件冒泡阶段**。首先开始的是事件捕获阶段，可以在这一阶段对事件进行拦截和限制。然后实际的目标接收到事件，最后开始的是事件冒泡阶段，一般我们都是在这个阶段对事件做相应的处理。
简单网站前端示例（html+css+js）
qq_39231899的博客
07-22 6943
html代码 草莓协会 草莓协会 网站首页 二级分类1 二级分类2 二级分类3 ...
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 191
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
图书馆研习室在线预约系统.docx
09-10
"本文介绍了图书馆研习室在线预约系统的开发背景、功能及技术实现。系统旨在解决高校图书馆座位资源紧张的问题，通过计算机实时监控和管理，优化座位使用。系统基于B/S架构，采用JSP技术结合MySQL数据库以及SSM...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值