当前位置：首页 > news >正文

JavaScript【6】事件

news 来源：原创 2025/6/8 21:35:06

1.概述：

在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。

它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面加载完成、元素获得或失去焦点等情况。这些事件可以被 JavaScript 代码捕获并进行相应的处理。

2.表单事件：

1.获取/失去焦点：onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onblur = function () {//失去焦点时this.style.backgroundColor = "green";}text.onfocus = function () {//获得焦点时this.style.backgroundColor = "red";}
</script></body>
</html>

默认输入框背景无填充色，只有触发下面事件才会将背景填充为对应颜色

点击输入框，此时获得焦点，触发获得焦点事件，将输入框背景改为红色

点击输入框以外的区域，此时失去焦点，触发失去焦点事件，将输入框背景改为绿色

2.节点内容改变：onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onchange = function () {//节点的内容改变时console.log(this.value)}
</script></body>
</html>

当输入1时，控制台输入1；

当删除输入框中的1后再重新输入1，发现控制台没有再次输出，说明此时没有触发该事件；

当输入框内的内容发送改变时，会再次触发该事件，并将输入值打印到控制台；

3.输入框有内容输入时：oninput

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.oninput = function () {//在用户输入时执行console.log(this.value)}
</script></body>
</html>

没有内容输入时，不触发该事件；

输入内容时，会将输入内容打印到控制台

当删除输入框内容时，会触发该事件，控制台打印空数据

当再次输入1时，再次触发该事件，控制台再次打印该数据

4.选取元素时：onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onselect = function () {console.log("选取元素时执行",this.value)}</script></body>
</html>

输入框输入内容时，不触发该事件

当选取输入内容时，触发该事件，将输入内容打印到控制台

5.提交时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return false;}*/</script></body>
</html>

此时返回值为false，点击提交按钮时不会触发提交事件，该表单不会被提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return true;}</script></body>
</html>

当返回值为true时，点击提交按钮会触发该事件，该表单会被提交（#表示提交到当前页面）

3.窗口事件：

1.获得/失去焦点时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onblur = function () {console.log('窗口失去了焦点')}window.onfocus = function () {console.log('窗口获得了焦点')}</script></body>
</html>

此时刚打开页面，不触发事件，所以控制台无输出

当点击左侧窗口区域时，触发获得焦点事件，控制台打印对应内容

当再次点击窗口外区域时，触发失去焦点事件，控制台再次打印对应内容

2.页面加载完成时：onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onload= function () {//当页面加载完成后执行console.log("页面加载完成")}</script></body>
</html>

 当使用低网速加载测试时，可以发现，不是一打开页面就会触发该事件，而是只有当整个页面加载出来后，才会触发该事件；

3.窗口大小改变时：onresize

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.onresize= function () {console.log("页面大小正在改变")}</script></body>
</html>

页面加载完成时，未触发事件

此时将窗口区域面积减小时，触发了该事件，并在控制台打印对应信息

4.键盘事件：

1.键盘按下时触发：onkeydown

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");//键盘按下时执行text.onkeydown = function (event) {// 解决兼容问题event = event || window.event;// key 按键//console.log("按下的键：", event.keyCode)console.log("按下的键：",event.key)}</script></body>
</html>

只要在键盘上按下按键，每按一次就会触发一次该事件，（如果长按则会重复触发），并将按键输出到控制台；

2.键盘弹起时触发：onkeyup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeyup = function (event) {console.log("按键弹起时：",event.key)}</script></body>
</html>

当长按1时，不会触发该事件，只有当松开时，会触发1次该事件

3.按下弹起时触发：onkeypress

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeypress = function (event) {console.log("按下弹起时：",event.key)}</script></body>
</html>

只有当按下并松开时才会触发该事件

4.案例：通过方向键控制色块移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;"></div>
<script>let box = document.getElementById("box");document.onkeydown = function (event) {let speed = 10;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";break;}}</script></body>
</html>

这是页面刚加载出来时色块的位置，此时我们可以通过方向键改变色块的位置

5.鼠标事件：

1.单击左键触发：onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onclick = function () {console.log("单击事件触发");}</script>
</body>
</html>

在元素区域（色块）内，单机鼠标左键，触发该事件

2.双击触发：ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.ondblclick = function () {console.log("双击事件触发");}</script>
</body>
</html>

双击元素区域，触发该事件

3.鼠标任意按键按下或松开时触发：onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousedown = function () {console.log("鼠标按钮按下时");}box.onmouseup = function () {console.log("鼠标按钮松开时");}</script>
</body>
</html>

在元素区域内按下或松开鼠标任意按键对会触发对应事件

4.鼠标指针移动时触发：onmousemove

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousemove = function () {console.log("鼠标指针移动时");}</script>
</body>
</html>

当鼠标指针在元素区域内移动时，就会重复触发该事件

5.鼠标指针移入或移出时触发：

不能阻止事件冒泡：onmouseover/onmouseout

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseover = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseout = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

可以阻止事件冒泡：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseenter = function () {// 能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseleave = function () {// 能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

6.鼠标滚轮滑动时触发：

1.有无内容都可触发（滑动滚轮）：onmousewheel

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");// 有没有内容都会触发/* box.onmousewheel = function () {console.log("鼠标的滚轮滚动时")}*/</script>
</body>
</html>

在元素区域内滑动鼠标滚轮，不管元素区域内有没有内容，都会触发该事件

2.必须有内容才会触发（滑动滚动条）：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内无内容，滑动鼠标滚轮不会触发该事件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内有内容，当我们滑动鼠标滚轮时会重复触发该事件

6.事件冒泡：

1.概述：

  事件冒泡 （Bubble）：是指事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；

2.示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")}
</script>
</body>
</html>

 在上面案例中，DIV2作为DIV1的子节点，当我们单击DIV2区域时，鼠标单击事件会向上传导到其父节点DIV1中，通过测试结果我们也可以看出当我们单击子节点div2时，不仅div2节点触发了该事件，其父节点div1节点也触发了该事件；

3.避免事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")stopBubble();}//取消事件的冒泡function stopBubble(event) {//处理浏览器兼容性问题if (event && event.stopPropagation) {event.stopPropagation()} else {window.event.cancelBubble = true;}}
</script>
</body>
</html>

此时单击div2区域，该事件不会再传导到其父节点div1中；

JavaScript【6】事件

1.概述： 在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面…...

编程日记 2025/5/26 7:18:01

Python训练打卡Day26

函数专题1：函数定义与参数知识点回顾： 函数的定义变量作用域：局部变量和全局变量函数的参数类型：位置参数、默认参数、不定参数传递参数的手段：关键词参数传递参数的顺序：同时出现三种参数类型时到目前为…...

编程日记 2025/5/29 10:41:58

通俗版解释CPU、核心、进程、线程、协程的定义及关系

通俗版解释（比喻法） 1. CPU 和核心 CPU 一个工厂（负责干活的总部）。核心工厂里的车间（比如工厂有4个车间，就能同时处理4个任务）。 2. 进程进程一家独立运营的公司（比如一家…...

编程日记 2025/5/29 12:55:17

微积分基本规则及示例解析

微积分中的基本规则是构成微积分理论和应用的基石。以下是一些微积分中的基本规则，我将用简单的例子来解释它们，以便小学生也能理解。 1. **极限规则**： - 常数的极限：\(\lim_{x \to a} c c\) - 例如，\(\lim…...

编程日记 2025/6/3 9:15:46

Baklib知识中台构建企业智能服务新引擎

知识中台构建智能服务新范式随着企业数字化转型进入深水区，传统知识管理模式的局限性日益显现——分散的文档系统、低效的信息检索以及割裂的业务场景，严重制约着组织效能的释放。在此背景下，Baklib提出的知识中台解决方案，通过…...

编程日记 2025/5/27 1:22:44

Python实例题：Python百行制作登陆系统

目录 Python实例题题目 python-login-systemPython 百行登录系统脚本代码解释用户数据库： 注册功能： 登录功能： 主程序： 运行思路注意事项 Python实例题题目 Python百行制作登陆系统 python-login-systemPython…...

编程日记 2025/5/29 13:15:44

Java求职面试：从核心技术到大数据与AI的场景应用

面试场景： 在某互联网大厂的面试间，一位严肃的面试官正准备对面前的求职者谢飞机进行技术面试。谢飞机虽然有些紧张，但他相信凭借自己的机智和幽默能够顺利通过。第一轮提问：核心语言与平台的基础问题面试官：“谢…...

编程日记 2025/5/29 17:50:24

系统架构设计（六）：面向对象设计

核心概念概念含义说明对象（Object）现实世界事物的抽象表示，包含属性（状态）和方法（行为）类（Class）一类对象的抽象模板继承（Inheritance）子类继承…...

编程日记 2025/5/26 20:47:51

国内AWS CloudFront与S3私有桶集成指南：安全访问静态内容

在现代web应用架构中，将静态内容存储在Amazon S3中并通过CloudFront分发是一种常见且高效的做法。本指南将详细介绍如何创建私有S3桶，配置CloudFront分配，并使用Origin Access Identity (OAI)来确保安全访问。步骤1：创建S3桶首先，我们需要创建一个名为"b-static&…...

编程日记 2025/6/1 9:46:45

MATLAB进行深度学习网络训练

文章目录前言环境配置一、环境部署二、数据准备三、训练配置与执行四、模型评估与优化五、高级技巧六、实战案例：COVID-19 肺部 CT 图像分类前言在 MATLAB 中进行深度学习网络训练主要分为数据准备、网络构建、训练配置和模型评估四个核心步骤。以下是详细教程&…...

编程日记 2025/5/26 4:16:04

jvm安全点(三)openjdk17 c++源码垃圾回收之安全点结束，唤醒线程

1. VMThread::inner_execute() - 触发安全点 cpp 复制 void VMThread::inner_execute(VM_Operation* op) { if (op->evaluate_at_safepoint()) { SafepointSynchronize::begin(); // 进入安全点，阻塞所有线程 // ...执行GC等操作... SafepointSynchronize::…...

编程日记 2025/5/26 7:23:20

局部放大maya的视图HUD文字大小的方法

一、问题描述： 有网友问：有办法局部放大maya的字体吗比如hud中currenttime打开之后画面右下角有个frame 想放大一下能做到吗？ 在 Maya 中，可以通过自定义 HUD（Heads-Up Display）元素的字体大小来局部放大特…...

编程日记 2025/5/26 7:14:31

Vue.js 教学第三章：模板语法精讲，插值与 v-bind 指令

Vue.js 模板语法精讲：插值与 v-bind 指令在 Vue.js 开发中，模板语法是构建动态用户界面的核心。本文将深入讲解两大基础模板语法：插值（{{ }}）和 v-bind 指令，通过大量实例帮助你掌握这些关键概念。一、插值语法：双花括号的魔法 1.1 基础文本插值双花括号是最简单的…...

编程日记 2025/5/30 3:41:30

系统架构设计师案例分析题——软件架构设计篇

重中之重，本题争取拿下25满分~ 目录一.核心知识 1.什么是架构风格 2.RUP的9个核心工作流 3.企业应用集成方式 4.软件质量属性 5.SySML系统建模语言9种图 6.云计算架构 7.中间件 8.构件、连接件、软件重用 9.层次型架构的缺点 10.架构开发方法ADM 11.微…...

编程日记 2025/5/28 16:29:38

系统架构设计（十一）：架构风格总结2

架构风格汇总架构风格核心特点应用场景分层架构（Layered）将系统划分为多个层次，每层只依赖于下一层企业应用、MIS 系统、三层架构客户端-服务器（C/S）分为服务端与客户端，服务集中，客户端请求数…...

编程日记 2025/5/29 16:49:46

泛微对接金蝶云星空实战案例技术分享

前言在企业信息化建设中，OA系统与ERP系统对接往往是一个复杂而关键的环节。OA系统通常具有高度的自定义性，其基础资料和单据可能与ERP系统存在字段不一致等问题。同时，OA系统涉及审批流程及流程发起方定义，增加了对接的复杂性。…...

编程日记 2025/5/27 17:49:49

Predict Podcast Listening Time-(回归+特征工程+xgb)

Predict Podcast Listening Time 题意： 给你没个播客的信息，让你预测观众的聆听时间。数据处理： 1.构造新特征收听效率进行分组 2.对数据异常处理 3.对时间情绪等进行数值编码 4.求某特征值求多项式特征 5.生成特征组合 6.交叉验证并enc…...

编程日记 2025/5/30 17:14:58

Java并发编程的挑战：从理论到实战

在现代软件开发中，随着多核处理器的普及和系统性能要求的提高，并发编程已经成为Java开发者必须掌握的核心技能之一。然而，Java并发编程不仅仅是“创建多个线程”那么简单，它涉及到线程安全、资源竞争、死锁、通信机制、性能优化等多个复杂问题。本文将围绕Java并发编程中…...

编程日记 2025/6/1 10:00:16

大麦（Hordeum vulgare）中 BAHD 超家族酰基转移酶-文献精读129

Systematic identification and expression profiles of the BAHD superfamily acyltransferases in barley (Hordeum vulgare) 系统鉴定与大麦（Hordeum vulgare）中 BAHD 超家族酰基转移酶的表达谱分析摘要 BAHD 超家族酰基转移酶在植物中催化和调控次…...

编程日记 2025/5/28 17:03:45

信任的进阶：LEI与vLEI协同推进跨境支付体系变革

在全球经济版图加速重构的背景下，跨境支付体系正经历着前所未有的变革。2022年全球跨境支付规模突破150万亿美元，但平均交易成本仍高达6.04%，支付延迟超过2.7天。这种低效率背后，隐藏着复杂的身份识别困境：超过40%的…...

编程日记 2025/5/28 15:43:38

当语言模型学会犯错和改正：搜索流(SoS)方法解析

引言语言模型的能力日新月异，但它们在执行复杂规划任务时仍面临着明显的局限。这是因为大多数训练数据只展示了最终的"正确答案"，而非解决问题的完整过程。想象一下，如果我们只能看到数学题的最终答案，而从不知道解题…...

编程日记 2025/5/28 15:56:26

Centos7.9同步外网yum源至内网

curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum makecache yum repolist安装软件 yum install -y yum-utils createrepo # yum-utils包含re…...

编程日记 2025/5/27 7:10:49

1.概述：

2.表单事件：

1.获取/失去焦点：onfocus/onblur

2.节点内容改变：onchange

3.输入框有内容输入时：oninput

4.选取元素时：onselect

5.提交时：

3.窗口事件：

1.获得/失去焦点时：

2.页面加载完成时：onload

3.窗口大小改变时：onresize

4.键盘事件：

1.键盘按下时触发：onkeydown

2.键盘弹起时触发：onkeyup

3.按下弹起时触发：onkeypress

4.案例：通过方向键控制色块移动

5.鼠标事件：

1.单击左键触发：onclick

2.双击触发：ondblclick

3.鼠标任意按键按下或松开时触发：onmousedown/onmouseup

4.鼠标指针移动时触发：onmousemove

5.鼠标指针移入或移出时触发：

不能阻止事件冒泡：onmouseover/onmouseout

可以阻止事件冒泡：

6.鼠标滚轮滑动时触发：

1.有无内容都可触发（滑动滚轮）：onmousewheel

2.必须有内容才会触发（滑动滚动条）：

6.事件冒泡：

1.概述：

2.示例：

3.避免事件冒泡：

相关文章：