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

专业做微视频的网站/seo怎么弄

news 文章来源：https://blog.csdn.net/qq_21484461/article/details/133849272 2025/3/10 14:48:52

专业做微视频的网站,seo怎么弄,外汇直播室都是网站做的,和男人人做的网站在本篇博客中，我们将深入探讨JavaScript事件，这是网页交互的核心。我们将从什么是事件开始，然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终，我们将提供大量的示例代码来帮助您更好地…

在这里插入图片描述

在本篇博客中，我们将深入探讨JavaScript事件，这是网页交互的核心。我们将从什么是事件开始，然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终，我们将提供大量的示例代码来帮助您更好地理解JavaScript事件。

什么是事件？

在Web开发中，事件是用户或浏览器发生的事情。这些事件可以是用户与页面互动，例如点击按钮、输入文本或鼠标移动，也可以是页面本身发生的事情，如文档加载完成或定时器触发。

JavaScript允许我们捕获、处理和响应这些事件，使得我们可以创建动态和交互性的网页。

事件的类型

JavaScript支持多种不同类型的事件，包括但不限于：

1. 鼠标事件

click：鼠标点击事件。
mouseover：鼠标移动到元素上时触发。
mouseout：鼠标从元素上移开时触发。
mousedown：鼠标按钮被按下时触发。
mouseup：鼠标按钮被释放时触发。

2. 键盘事件

keydown：键盘上的键被按下时触发。
keyup：键盘上的键被释放时触发。

3. 表单事件

submit：表单提交时触发。
change：表单元素的值发生改变时触发。
input：输入框的内容发生变化时触发。

4. 网页加载事件

load：整个页面及外部资源加载完成时触发。
DOMContentLoaded：DOM结构加载完成时触发，不必等待图片等外部资源加载完毕。

5. 自定义事件

您还可以创建自定义事件，以满足特定需求。

如何注册事件

要在HTML元素上注册事件，您可以使用HTML属性或JavaScript代码。以下是两种主要方法：

1. HTML属性

可以使用以下HTML属性将事件处理程序附加到HTML元素：

<button onclick="myFunction()">点击我</button>

这里onclick是一个事件属性，它告诉浏览器在按钮被点击时执行myFunction函数。

2. JavaScript代码

使用JavaScript，您可以使用addEventListener方法注册事件处理程序：

const button = document.getElementById('myButton');
button.addEventListener('click', myFunction);

这样的方式更具灵活性，可以在JavaScript中动态创建、移除和控制事件。

事件处理程序

事件处理程序是JavaScript函数，它定义了事件触发时要执行的操作。事件处理程序通常带有一个事件对象参数，以便访问事件的相关信息。

function myFunction(event) {alert('按钮被点击了！');
}

事件对象

事件处理程序的参数通常是事件对象，它包含有关事件的详细信息，例如事件类型、目标元素、鼠标坐标等。

function myFunction(event) {console.log('事件类型：' + event.type);console.log('目标元素：' + event.target);console.log('鼠标X坐标：' + event.clientX);console.log('鼠标Y坐标：' + event.clientY);
}

事件对象的属性和方法因事件类型而异，可以根据需要使用。

事件冒泡

事件冒泡是指事件从目标元素冒泡到文档树根元素的过程。这意味着事件会先在最深的嵌套元素上触发，然后逐级向上传播，直到文档树的根元素。

<div id="parent"><button id="child">点击我</button>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');parent.addEventListener('click', function() {console.log('父元素被点击');
});child.addEventListener('click', function() {console.log('子元素被点击');
});

在这个示例中，当点击按钮时，事件会首先在子元素上触发，然后冒泡到父元素。因此，控制台将输出以下内容：

子元素被点击
父元素被点击

您可以使用stopPropagation方法来阻止事件继续冒泡：

child.addEventListener('click', function(event) {console.log('子元素被点击');event.stopPropagation(); // 阻止事件冒泡
});

在这种情况下，只有子元素上的事件处理程序会运行，父元素上的不会执行。

示例代码

让我们通过一些示例代码来演示JavaScript事件的使用。

示例 1：点击按钮改变文本

<!DOCTYPE html>
<html>
<head><title>点击按钮改变文本</title>
</head>
<body><button id="myButton">点击我</button><p id="myText">我会在按钮点击后改变</p><script>const button = document.getElementById('myButton');const text = document.getElementById('myText');button.addEventListener('click', function() {text.textContent = '按钮被点击了！';});</script>
</body>
</html>

示例 2：鼠标悬停显示提示

<!DOCTYPE html>
<html>
<head><title>鼠标悬停显示提示</title><style>.tooltip {position: relative;display: inline-block;cursor: pointer;}.tooltiptext {visibility: hidden;width: 120px;background-color: #333;color: #fff;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;transition: opacity 0.3s;}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}</style>
</head>
<body><div class="tooltip">鼠标悬停我<span class="tooltiptext">这是一个提示</span></div>
</body>
</html>

这两个示例展示了事件处理程序的实际应用，以及如何与CSS样式和HTML元素互动，创造出各种交互效果。

结语

JavaScript事件是Web开发中不可或缺的一部分，使得网页变得更加生动和交互。在本博客中，我们深入探讨了事件的类型、注册事件的方法、事件处理程序、事件对象以及事件冒泡。通过不断练习和实验，您将能够掌握JavaScript事件，创造出更具交互性的网页。祝您编写愉快！

如果您对特定主题有更多的疑问或需要更多的示例代码，请随时向我们提问。我们很乐意为您提供帮助。

作者信息

作者：繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

【Java 进阶篇】JavaScript 事件详解

在本篇博客中，我们将深入探讨JavaScript事件，这是网页交互的核心。我们将从什么是事件开始，然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终，我们将提供大量的示例代码来帮助您更好地…...

编程日记 2023/10/16 1:56:31

动态内存管理+柔性数组+经典笔试题

💓博客主页：江池俊的博客⏩收录专栏：C语言进阶之路👉专栏推荐：✅C语言初阶之路 ✅数据结构探索💻代码仓库：江池俊的代码仓库🎉欢迎大家点赞👍评论📝收藏⭐ 文…...

编程日记 2023/10/16 1:53:28

SQL和Python，哪个更容易自学？哪个更适合数据工作的编程新手？

如果你想从事数据工作，比如数据分析、数据开发、数据科学等，你可能会遇到这样的问题：SQL和Python哪个更容易自学？哪个更有用？哪个更有前途？其实这两种语言都是数据工作的重要技能，但它们的特点和…...

编程日记 2023/10/16 1:52:27

修改CDB的max_string_size，从STANDARD到EXTENDED

操作过程参考19c官方文档。具体过程如下。先修改参数并重启： -- 修改参数 -- 注意：即使在 MAX_STRING_SIZE 设置为 EXTENDED 之后，根仍继续使用 STANDARD 语义。 -- 在根中将 MAX_STRING_SIZE 设置为 EXTENDED 的原因是，CDB 中…...

编程日记 2023/10/16 1:51:26

Python 字典

目录 1 字典介绍2 字典的创建3 字典元素的访问4 字典元素添加、修改、删除5 序列解包6 表格数据使用字典和列表存储，并实现访问7 字典核心底层原理(重要)7.1 将一个键值对放进字典的底层过程7.2 扩容7.3 根据键查找“键值对”的底层过程7.4 用法总结： 声…...

编程日记 2023/10/16 1:49:23

【nginx】nginx部署升级htpp+websocket访问

关注todo-step1和todo-step2就行了： user root; …… http {### Basic Settings##sendfile on;tcp_nopush on;types_hash_max_size 2048;client_max_body_size 10240m;include /etc/nginx/mime.types;default_type application/octet-stream;# 配置websocket访问 *…...

编程日记 2023/10/16 1:48:21

C# 生成JWT的Token

using JWT.Algorithms; using JWT; using JWT.Serializers;private string GetToken(string timeStamp, string deptName, string doctorName, string idNo){string token string.Empty;string appID config.AppID;string secretKey config.AppSecret;//十分钟有效期long ex…...

编程日记 2023/10/16 1:46:20

C# AnimeGAN 漫画风格迁移动漫风格迁移图像卡通化图像动漫化

效果项目模型 animeganv3_H40_model.onnx animeganv3_H50_model.onnx animeganv3_H64_model.onnx AnimeGANv3_JP_face_v1.0.onnx AnimeGANv3_PortraitSketch_25.onnx Hayao-60.onnx Hayao_64.onnx Paprika_54.onnx Shinkai_53.onnx 下载可执行文件exe下载源码下载...

编程日记 2023/10/16 1:45:17

Ruby语言基础知识

Ruby是一种简单快捷的面向对象脚本语言，由日本人松本行弘（Yukihiro Matsumoto）在20世纪90年代开发，遵守GPL协议和Ruby License。它的灵感和特性来自于Perl、Smalltalk、Eiffel、Ada以及Lisp语言。以下是Ruby语言的一些特点&#…...

编程日记 2023/10/16 1:44:16

vh、vw、vmin、vmax

1、分别是什么？ vh:指屏幕可见视窗的高， vw:指屏幕可见视窗的宽， vmin:vh和vw之间选较小的值， vmax:vh和vw之间选较大的值。 2、和百分比的区别百分比时基于父元素的宽高，而vh\vw\vmin\vmax基于屏幕可见视图的宽…...

编程日记 2023/10/16 1:43:15

Selenium浏览器启动方式

Chromedriver所有版本下载原文链接浏览器的基本操作普通方式启动浏览器： from selenium import webdriver # 启动Chrom浏览器 browser webdriver.Chrome() # 启动Edge浏览器 browser webdriver.Edge() # 启动Firefox浏览器 browser webdriver.Firefox() br…...

编程日记 2023/10/16 1:42:14

Linux 网络编程 tcp server 笔记

一、TCP 服务器的创建在 Linux 上创建一个简单的 tcp 服务器步骤如下： ①创建套接字 ②将套接字绑定到 IP 地址和端口号 ③监听来自客户端的连接 ④接受连接并创建新的套接字用于与客户端通信 ⑤通过新建的套接字发送和接收数据 ⑥关闭套接字流程框图如下&#xf…...

编程日记 2023/10/16 1:41:13

C语言-贪吃蛇 1.输入控制ncurse

一、为什么要用nurse C语言中的gets()、scanf()、getchar()等函数是在用户输入后需要按下Enter键才能执行代码，而贪吃蛇要求按下按键后立即对蛇的方向进行操作，所以根据贪吃蛇功能的需求引入ncurse，让用户输入后就能让蛇进行对应的行动。二、…...

编程日记 2023/10/16 1:40:12

Pytorvh之Vision Transformer图像分类

文章目录前言一、Transformer1.Transformer概览2.Self-Attention3.Multi-head Attention4.Position-wise Feed-Forward Networks(位置前馈网络)5.残差连接和层归一化6.Positional Encodings(位置编码) 二、Vision Transformer1.Vision Transformer概览2.Embedding层结构&#…...

编程日记 2023/10/16 1:39:12

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备最近把NI-IMAQ更新到最新的1394版本。这个新驱动工作良好。但是，当打开MAX，NII MAQ设备却在RT PXI机箱里找不到。问题最有可能是NIIMAQ服务器的版本跟主机PC和RT目标设备是不同的。为保证通信正常NII MAQ服…...

编程日记 2023/10/16 1:38:10

three.js入门 ---- 相机控件OrbitControls

前言： 自用！！！ 文档中描述：OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改…...

编程日记 2023/10/16 1:37:09

数字IC/FPGA面试题目合集解析（一）

数字IC/FPGA面试题目合集解析（一） 题目概述题目1，计算题2，计算题3，选择题答案与解析1，计算题2，计算题3，选择题题目概述 1，计算题：计算该触发器等效的建立保…...

编程日记 2023/10/16 1:36:08

20231014后台面经总结

1.Spring怎么解决循环依赖形象地解释为什么三层缓存我的简单理解： 1.A依赖B，B生成时先注入A未注入属性的原始对象earlySingletonObject 2.引入三级缓存SingletonFacotry的目的是解决aop提前创建代理的步骤，不然它注入的对象跟真实的不一致…...

编程日记 2023/10/16 1:35:07

RabbitMQ的七种工作模式和分别概述

MQ（Message Queuing）的七种工作模式如下： Point-to-Point (P2P)模式：在这种模式下，消息传递是单向的，即消息从一个生产者发送到一个消费者。消息被放置在队列中，消费者从该队列中取出消息进行处…...

编程日记 2023/10/16 1:33:03

使用Vscode开发C#没有代码提示问题

很多小伙伴在使用Vscode去编写C#脚本的时候会发现没有代码提示，这样你的敲代码速度会变的很慢！ 错误使用方法直接把C#脚本拖入到Vscode中进行编写，这样是不会有代码提示的！ 正确打开办式 Edit（编辑）…...

编程日记 2023/10/16 1:32:02

统信UOS 1060上通过Fail2Ban来Ban IP

原文链接：统信UOS 1060上通过Fail2Ban来Ban IP hello，大家好啊，今天给大家带来一篇在统信UOS 1060上安装Fail2Ban并且当ip被ban后通过邮件发送通知的文章。Fail2Ban 是一个用于防止暴力攻击的开源软件。它可以扫描日志文件（例如&a…...

编程日记 2023/10/16 1:30:00

Linux系统编程：文件描述符以及IO多路复用

书接上回，我们之前学习的文件系统编程都是在内存空间中的文件流（用户态文件缓冲区）内进行操作的，比如使用的fopen、fclose、fread和fwrite等等都是库函数，并没有用到内核态的功能（实际上库函数中调用的是内…...

编程日记 2023/10/16 1:28:58

python基于django的留学生服务管理平台

留学服务管理平台的用户是系统最根本使用者，按需要分析系统包括三类用户：学生、教师、管理员。这三类用户对系统的需求简要如下。技术栈后端：pythondjango 前端：vueCSSJavaScriptjQueryelementui 开发语言：Python 框架…...

编程日记 2023/10/16 1:27:57

C++ 之 Map

Map map 是C STL中的关联容器， key-Value键值对存储，一对一的映射关系。内部结构采用的是红黑树， 它会实现对数据的自动排序 ，所以map内部所有的数据都是有序的。 #include <map>定义的结构: map<数据类型1, 数据类型…...

编程日记 2023/10/16 1:24:54

MongoDB——centOS7环境Mongodb权限管理（图解版）

目录一、MongDB权限概述1.1、MongDB权限概述1.2、MongDB权限列表二、Mongodb权限管理示例2.1、创建账号2.1.1、创建管理员用户2.1.2、开启认证2.1.3、创建普通账号一、MongDB权限概述 1.1、MongDB权限概述 mongodb是没有默认管理员账号，所以要先添加管理员账号…...

编程日记 2023/10/16 1:22:51

AndroidX项目接入穿山甲广告填坑

本文旨在记录初步接入过程遇到的一点点小问题，更详细的文档还是要参考官方文档。一、项目版本 GradlePlugin：8.0.2 Gradle：8.0 Kotlin：1.7.20 compileSdk：34 compose-bom:2022.10.00 AS：2022.2.1 …...

编程日记 2023/10/16 1:21:51

汽车电子 - matlab - 用法

汽车电子 - matlab - 用法面向对象面向对象 % Man.m classdef Man < handle%UNTITLED2 此处显示有关此类的摘要% 此处显示详细说明properties(Accessprivate) %私有变量scoreendpropertiesageheightendmethodsfunction obj Man(inputArg1,inputArg2)%UNTITLED2 构造此…...

编程日记 2023/10/16 1:18:46

freefilesync文件同步软件

下载下载链接 https://freefilesync.org/download.php 往下拉，看到下载的链接下载windows版本下载地址： https://freefilesync.org/download/FreeFileSync_13.0_Windows_Setup.exe 直接复制到浏览器中访问就能下载安装双击安装包，一路默…...

编程日记 2023/10/16 1:16:44

【2023】M1/M2 Mac 导入Flac音频到Pr的终极解决方案

介绍原作者链接：https://github.com/fnordware/AdobeOgg 很早之前就发现了这个插件，超级好用，在windows上完全没有问题，可惜移植到mac就不行了（然后我给作者发了一个Issue，后来就有大佬把m1的编译出来了&…...

编程日记 2023/10/16 1:15:43

C# 图解教程第5版 —— 第6章方法

文章目录 6.1 方法的结构6.2 方法体内部的代码执行6.3 局部变量6.3.1 类型推断和 var 关键字6.3.2 嵌套块中的局部变量 6.4 局部常量6.5 控制流6.6 方法调用（*）6.7 返回值（*）6.8 返回语句和 void 方法6.9 局部函数6.10 参数&#…...

编程日记 2023/10/16 1:13:40