JavaScript的事件监听

已于 2024-07-25 09:58:10 修改
阅读量25 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2024-07-25 09:51:39 首次发布
原文链接：https://blog.csdn.net/Welitsi/article/details/132906980
版权

一、认识事件处理

1.认识事件

Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：

  • 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
  • 浏览器需要搭建一条JavaScript代码和事件之间的桥梁；
  • 当某个事件发生时，让JavaScript可以响应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；

如何进行事件监听呢？

  • 事件监听方式一：在script中直接监听（很少使用）；
  • 事件监听方式二：DOM属性，通过元素的on来监听事件；
  • 事件监听方式三：通过EventTarget中的addEventListener来监听；
<body>
  <!-- 监听方式一 script--> 
  <button onclick="alert('hello world');">nihao1</button>
  <button>nihao2</button>
  <button>nihao3</button>
  <script>
    // 监听方式二 on
    var btn2El = document.body.children[1];
    btn2El.onclick = function () {
      alert("监听方式2");
    }
    // 监听方式三 addListenEvent
    var btn3El = document.body.children[2];
    btn3El.addEventListener("click", function () {
      alert("监听方式3");
    })
</script>

2.常见的事件列表

鼠标事件：

  • click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
  • mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
  • mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
  • mousemove —— 当鼠标移动时。

键盘事件：

  • keydown 和 keyup —— 当按下和松开一个按键时。

表单（form）元素事件：

  • submit —— 当访问者提交了一个<form> 时。
  • focus —— 当访问者聚焦于一个元素时，例如聚焦于一个<input> 。

Document 事件：

  • DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。

CSS 事件：

  • transitionend —— 当一个 CSS 动画完成时。

二、事件冒泡捕获

1.认识事件流

事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？

  • 我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
  • 这是因为我们的HTML元素是存在父子元素叠加层级的；
  • 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；
<div class="box">
    <span class="word">哈哈哈哈</span>
</div>

 
 

 
 
  • // 认识事件流
var boxEl = document.querySelector(".box");
var wordEl = document.querySelector(".word");
boxEl.addEventListener("click", function() {
    console.log("boxboxbox");
})
wordEl.addEventListener("click", function () {
    console.log("wordwordword");
})

   
   
    
   
   
    • 2.事件冒泡和事件捕获
       

    
    
      我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;
       

    
    
      事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；
       

    
    
      为什么会产生两种不同的处理流呢？
       

    
    
      • 这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;
      • 但是他们采用了完全相反的事件流来对事件进行了传递；
      • IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；
       

    
    
      那么我们如何去监听事件捕获的过程呢？
       

    
    
      在这里插入图片描述
       

    
    
      3.事件捕获和冒泡的过程
       

    
    
      如果我们都监听，那么会按照如下顺序来执行：
       

    
    
      捕获阶段（Capturing phase）：
       

    
    
      • 事件（从 Window）向下走近元素。
       

    
    
      目标阶段（Target phase）：
       

    
    
      • 事件到达目标元素。
       

    
    
      冒泡阶段（Bubbling phase）：
       

    
    
      • 事件从元素上开始冒泡。
       

    
    
      事实上，我们可以通过event对象来获取当前的阶段：
       

    
    
      • eventPhase
       

    
    
      开发中通常会使用事件冒泡，所以事件捕获了解即可。
       

    
    
      在这里插入图片描述
       

    
    
      // 默认情况下是事件冒泡
spanEl.addEventListener("click", function() {
    console.log("span元素发生了点击~冒泡")
})
divEl.addEventListener("click", function() {
    console.log("div元素发生了点击~冒泡")
})
bodyEl.addEventListener("click", function() {
    console.log("body元素发生了点击~冒泡")
})

// 设置希望监听事件捕获的过程
spanEl.addEventListener(“click”, function() {
console.log(“span元素发生了点击~捕获”)
}, true)
divEl.addEventListener(“click”, function() {
console.log(“div元素发生了点击~捕获”)
}, true)
bodyEl.addEventListener(“click”, function() {
console.log(“body元素发生了点击~捕获”)
}, true)

    三、事件对象event

    1.事件对象

    当一个事件发生时，就会有和这个事件相关的很多信息：

    • 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
    • 那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；
    • 该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；

    如何获取这个event对象呢？

    • event对象会在传入的事件处理（event handler）函数回调时，被系统传入；
    • 我们可以在回调函数中拿到这个event对象；

    这个对象中都有哪些常见的属性和操作呢？

    2.event常见的属性和方法

    常见的属性：

    • type：事件的类型；
    • target：当前事件发生的元素；
    • currentTarget：当前处理事件的元素；
    • eventPhase：事件所处的阶段；
    • offsetX、offsetY：事件发生在元素内的位置；
    • clientX、clientY：事件发生在客户端内的位置；
    • pageX、pageY：事件发生在客户端相对于document的位置；
    • screenX、screenY：事件发生相对于屏幕的位置；

    常见的方法：

    • preventDefault：取消事件的默认行为；
    • stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；
    // 认识事件流
var boxEl = document.querySelector(".box");
var wordEl = document.querySelector(".word");
// 事件冒泡
wordEl.addEventListener("click", function (event) {
    console.log("word冒泡", event.target, event.currentTarget);
    console.log(event.type);//click
    console.log(event.eventPhase);//2
})
wordEl.addEventListener("click", function (event) {
    console.log("word捕获", event.target, event.currentTarget);
    console.log(event.type);//click
    console.log(event.eventPhase);//2
}, true)
boxEl.addEventListener("click", function (event) {
    console.log("box捕获", event.target, event.currentTarget);
    console.log(event.type);//click
    console.log(event.eventPhase);//1
}, true)
document.body.addEventListener("click", function (event) {
    console.log("body捕获", event.target, event.currentTarget);
    console.log(event.type);//click
    console.log(event.eventPhase);//1
    // 停止传递
    // event.stopPropagation();
}, true)
var aEl = document.querySelector("a");
console.log(aEl);
console.log(aEl.href);
aEl.addEventListener("click", function (event) {
    console.log("a标签冒泡");
    // 阻止默认行为：比如a标签的跳转
    event.preventDefault();
})

 
 
    
 
 
    
  
  
 
 
    
 
 
    • 
  
  3, 153);">

    3.事件处理中的this

    在函数中，我们也可以通过this来获取当前的发生元素：

    divEl.onclick = function(event) {
    console.log(this)
    console.log(event.currentTarget)
    console.log(divEl)
    console.log(this === divEl)
}

 
 
    
 
 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这是因为在浏览器内部，调用event handler是绑定到当前的target上的

    四、EventTarget使用

    1.EventTarget类

    我们会发现，所有的节点、元素都继承自EventTarget

    • 事实上Window也继承自EventTarget；

    那么这个EventTarget是什么呢？

    • EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件；

    EventTarget常见的方法：

    • addEventListener：注册某个事件类型以及事件处理函数；
    • removeEventListener：移除某个事件类型以及事件处理函数；
    • dispatchEvent：派发某个事件类型到EventTarget上；
    var btnEl = document.querySelector("button")

    // 1.将监听函数移除的过程
    // var foo = function() {
    // console.log(“监听到按钮的点击”)
    // }
    // btnEl.addEventListener(“click”, foo)

    // // 需求: 过5s钟后, 将这个事件监听移除掉
    // setTimeout(function() {
    // btnEl.removeEventListener(“click”, foo)
    // }, 5000)

    // 这种做法是无法移除的
    btnEl.addEventListener(“click”, function() {
    console.log(“btn监听的处理函数~”)
    })

    setTimeout(function() {
    btnEl.removeEventListener(“click”, function() { })
    }, 5000)

      // 派发事件
setTimeout(() => {
    // 3秒后触发点击事件
    btnEl.dispatchEvent(new Event("click"));
}, 3000);

        五、事件委托模式

        1.事件委托

        事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式（也是一种设计模式）

        那么这个模式是怎么样的呢？

        • 因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
        • 并且可以通过event.target获取到当前监听的元素；

        案例：一个ul中存放多个li，点击某一个li会变成红色

        • 方案一：监听每一个li的点击，并且做出相应；
        • 方案二：在ul中监听点击，并且通过event.target拿到对应的li进行处理；
          • 因为这种方案并不需要遍历后给每一个li上添加事件监听，所以它更加高效；
        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul,li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .item {
      display: inline-block;
      padding: 20px;
    }
    .active {
      background-color: yellow;
      color: blue;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">吃饭睡觉打豆豆</li>
    <li class="item">吃饭睡觉打豆豆</li>
    <li class="item">吃饭睡觉打豆豆</li>
    <li class="item">吃饭睡觉打豆豆</li>
    <li class="item">吃饭睡觉打豆豆</li>
  </ul>
  <script>
    var ulEl = document.querySelector("ul");
    ulEl.addEventListener("click", function (event) {
      // 委托模式
      // 获取触发事件的元素
      event.target.classList.toggle("active");
    })
  </script>
</body>
</html>

          2.事件委托的标记

          某些事件委托可能需要对具体的子组件进行区分，这个时候我们可以使用data-*对其进行标记：

          比如多个按钮的点击，区分点击了哪一个按钮：

          <!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 class=“box”>
          <button data-action=“search”>搜索~</button>
          <button data-action=“new”>新建~</button>
          <button data-action=“remove”>移除~</button>
          <button>1111</button>
          </div>

          <script>

          <span class="token keyword">var</span> boxEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span>
boxEl<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">var</span> btnEl <span class="token operator">=</span> event<span class="token punctuation">.</span>target
  <span class="token keyword">var</span> action <span class="token operator">=</span> btnEl<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>action
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">case</span> <span class="token string">"remove"</span><span class="token operator">:</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"点击了移除按钮"</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span>
    <span class="token keyword">case</span> <span class="token string">"new"</span><span class="token operator">:</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"点击了新建按钮"</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span>
    <span class="token keyword">case</span> <span class="token string">"search"</span><span class="token operator">:</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"点击了搜索按钮"</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"点击了其他"</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

          </script>

          </body>
          </html>

            六、常见的事件

            1.常见的鼠标事件

            接下来我们来看一下常见的鼠标事件（不仅仅是鼠标设备，也包括模拟鼠标的设备，比如手机、平板电脑）

            常见的鼠标事件：

            在这里插入图片描述

            1.1 mouseover和mouseenter的区别

            mouseenter和mouseleave

            • 不支持冒泡
            • 进入子元素依然属于在该元素内，没有任何反应

            mouseover和mouseout

            • 支持冒泡
            • 进入元素的子元素时
              • 先调用父元素的mouseout
              • 再调用子元素的mouseover
              • 因为支持冒泡，所以会将mouseover传递到父元素中；
            var boxEl = document.querySelector(".box");
var containerEl = document.querySelector(".container");
// mouseenter mouseleave
// containerEl.addEventListener("mouseenter", function (event) {
//   console.log("鼠标进来拉")
// })
// containerEl.addEventListener("mouseleave", function (event) {
//   console.log("鼠标离开拉")
// })
// mouseover mouseout
containerEl.addEventListener("mouseover", function (event) {
    console.log("鼠标进来拉")
})
containerEl.addEventListener("mouseout", function (event) {
    console.log("鼠标离开拉")
})

              2.常见的键盘事件

              常见的键盘事件：
              在这里插入图片描述

              事件的执行顺序是 onkeydown、onkeypress、onkeyup

              • down事件先发生；
              • press发生在文本被输入；
              • up发生在文本输入完成；

              我们可以通过key和code来区分按下的键：

              • code：“按键代码”（“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置。
              • key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。
              var inputEl = document.querySelector("input")
var btnEl = document.querySelector("button")

              // inputEl.onkeydown = function() {
              // console.log(“onkeydown”)
              // }
              // inputEl.onkeypress = function() {
              // console.log(“onkeypress”)
              // }
              // inputEl.onkeyup = function(event) {
              // console.log(event.key, event.code)
              // }

              // 1.搜索功能
              btnEl.onclick = function() {
              console.log(“进行搜索功能”, inputEl.value)
              }

              inputEl.onkeyup = function(event) {
              if (event.code === “Enter”) {
              console.log(“进行搜索功能”, inputEl.value)
              }
              }

              // 2.按下s的时候, 搜索自动获取焦点
              document.onkeyup = function(event) {
              if (event.code === “KeyS”) {
              inputEl.focus()
              }
              }

                3.常见的表单事件

                针对表单也有常见的事件：

                在这里插入图片描述

                var inputEl = document.querySelector("input")

                // 1.获取焦点和失去焦点
                // inputEl.onfocus = function() {
                // console.log(“input获取到了焦点”)
                // }
                // inputEl.onblur = function() {
                // console.log(“input失去到了焦点”)
                // }

                // 2.内容发生改变/输入内容
                // 输入的过程: input
                // 内容确定发生改变(离开): change
                // inputEl.oninput = function() {
                // console.log(“input事件正在输入内容”, inputEl.value)
                // }
                // inputEl.onchange = function() {
                // console.log(“change事件内容发生改变”, inputEl.value)
                // }

                // 3.监听重置和提交
                var formEl = document.querySelector(“form”)
                formEl.onreset = function(event) {
                console.log(“发生了重置事件”)
                event.preventDefault()
                }

                formEl.onsubmit = function(event) {
                console.log(“发生了提交事件”)
                // axios库提交
                event.preventDefault()
                }

                  4.文档加载事件

                  DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像<img> 和样式表之类的外部资源可能尚未加载 完成。

                  load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

                  // 注册事件监听
window.addEventListener("DOMContentLoaded", function() {
    // 1.这里可以操作box, box已经加载完毕
    // var boxEl = document.querySelector(".box")
    // boxEl.style.backgroundColor = "orange"
    // console.log("HTML内容加载完毕")

                  <span class="token comment">// 2.获取img对应的图片的宽度和高度</span>
<span class="token keyword">var</span> imgEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"图片的宽度和高度:"</span><span class="token punctuation">,</span> imgEl<span class="token punctuation">.</span>offsetWidth<span class="token punctuation">,</span> imgEl<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">)</span>

                  })

                  window.onload = function() {
                  console.log(“文档中所有资源都加载完毕”)
                  // var imgEl = document.querySelector(“img”)
                  // console.log(“图片的宽度和高度:”, imgEl.offsetWidth, imgEl.offsetHeight)
                  }

                  window.onresize = function() {
                  console.log(“创建大小发生改变时”)
                  }

                    事件类型：https://developer.mozilla.org/zh-CN/docs/Web/Events

                    转载： https://blog.csdn.net/Welitsi/article/details/132906980
                    modi000
                    关注
                    • 0
                      点赞
                    • 踩
                    • 0
                      收藏
                      觉得还不错? 一键收藏
                    • 0
                      评论
                    专栏目录
                    JavaScript事件监听器总结
                    Maybe_ss的博客
                    10-19 3806
                    事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
                    JavaScript事件监听器的功能
                    weixin_26750481的博客
                    09-14 1592
                    Today in this story we will see about the functions of Event Listener in JavaScript. The addEventListener() method is used to setup called function when an specified event happens. So we will discuss ...
                    JavaScript事件监听
                    CSPsy的博客
                    03-06 3345
                    JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
                    JavaScript 事件监听详解
                    xycxycooo的博客
                    07-16 1076
                    在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
                    JavaScript 事件监听
                    m0_57855884的博客
                    05-07 393
                    JavaScript 事件监听
                    JavaScript之事件监听
                    qq_43751200的博客
                    06-06 1246
                    JavaScript之事件监听
                    JavaScript监听事件
                    loneii的博客
                    06-19 2263
                    JavaScript实现事件监听的方法
                    JavaScript事件监听(事件类型、事件对象、事件解绑)、this环境对象、改变this指向
                    Bulut0907
                    05-20 651
                    L0旧版事件解绑：直接使用null覆盖就可以。点击按钮不会出现弹窗。L2新版事件解绑：使用。
                    JavaScript 事件监听器列表
                    m0_63639281的博客
                    08-22 1429
                    JavaScript 事件监听器列表
                    javascript事件监听与事件委托实例详解
                    12-29
                    本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下： 事件监听与事件委托 在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种...
                    封装了一个支持匿名函数的Javascript事件监听器
                    10-25
                    JavaScript事件监听器是一种非常重要的前端技术，它允许开发者对用户与网页的交互做出响应。事件监听器涉及的概念包括事件类型、事件处理函数、事件冒泡等。在不同的浏览器中，事件监听的方式略有不同，常见的方法有...
                    JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
                    12-03
                    JavaScript 事件监听是一种处理用户或浏览器行为的方式，它允许开发者在特定事件发生时执行相应的代码。这个实例代码是为了实现跨浏览器的事件监听功能，确保在 Internet Explorer (IE) 和 Firefox 等其他浏览器中都...
                    python12 中，No module named‘distutils‘错误
                    qq_43557600的博客
                    08-27 3941
                    python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
                    vue ref和reactive区别
                    灰海
                    08-25 1523
                    在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
                    jQuery基础——DOM
                    最新发布
                    m0_54066656的博客
                    08-27 1131
                    JQ基础——DOM操作
                    Ant-Design-Vue快速上手指南+排坑，操作详细步骤
                    liyy614的博客
                    08-23 1097
                    总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
                    vue全局参数
                    qq_34631220的博客
                    08-24 500
                    其它页面如果想监听改变。
                    浏览器精度问题
                    m0_46281382的博客
                    08-25 589
                    浏览器如何解析后端返回的long类型的数据
                    javascript事件监听器
                    09-25
                    事件监听器是一种用于在特定事件发生时执行特定代码的机制。在JavaScript中，可以使用addEventListener方法来绑定事件监听器。通过addEventListener方法，可以指定要监听的事件类型（如点击事件）和要执行的函数。当触发指定的事件时，绑定的函数将会被调用。 在你提供的代码中，有两种方式可以实现事件监听：传统的事件绑定和事件监听器写法。传统的事件绑定使用onclick属性来指定要执行的函数，但是这种方式只能绑定一个事件处理函数。而使用事件监听器写法，可以通过addEventListener方法绑定多个事件处理函数，它们将按照绑定的顺序执行。
                    评论
                    添加红包

                    请填写红包祝福语或标题

                    个

                    红包个数最小为10个

                    元

                    红包金额最低5元

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

                    抵扣说明：

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

                    余额充值