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

HTML之JavaScript DOM（document）编程处理事件

news 2026/2/10 8:52:54

HTML之JavaScript DOM（document）编程处理事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行事件的三要素：事件源、事件、事件处理程序事件的绑定：1.通过元素的属性绑定 on***2.通过DOM编程动态绑定注：1.一个事件可以绑定多个函数；eg：onclick="show(),show1()2.一个元素可以绑定多个事件  eg：onclick="show()" ondblclick="show2()"常见的事件：1.鼠标事件2.键盘事件3.表单事件4.页面加载事件onload ：页面加载完毕事件事件的触发1.行为触发2.DOM编程触发*/</script><!-- 代码顺序影响浏览器执行代码的时间解决方案：等页面加载完毕之后再加载js脚本--><script>// 方法一：// function ready() {//     // 通过DOM获得要操作的元素//     var btn = document.getElementById("btn1"); //返回一个对象//     // 绑定一个单击事件//     btn.onclick = function () {  //隐函数//         alert("11");//     }// }// 方法二：此方法无需在body标签中再加onloadwindow.onload = function () {// 通过DOM获得要操作的元素var btn = document.getElementById("btn1"); //返回一个对象// 绑定一个单击事件btn.onclick = function () {  //隐函数alert("11");}// 为div1绑定事件var d1 = document.getElementById("div1");d1.onclick = function () {console.log("已点击")div1.style.backgroundColor = "red"}// 通过按钮触发div事件btn.onclick = function () {  //隐函数alert("变色")//通过dom编程触发事件，相当于触发了某些事件发生了d1.onclick()}}</script><style>.div1 {width: 100px;height: 100px;background-color: yellow;border: 1px;}</style>
</head><!-- <body onload="ready()">   跟方法一搭配--><body><input type="button" id="btn1" value="按钮"><div class="div1" id="div1"></div></body></html>

相关文章：

HTML之JavaScript DOM（document）编程处理事件

HTML之JavaScript DOM&#xff08;document&#xff09;编程处理事件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2025/2/19 23:31:03

5.【线性代数】—— 转置，置换和向量空间

五 转置&#xff0c;置换和向量空间 1. 置换矩阵2. 转置矩阵3. 对称矩阵4. 向量空间4.1 向量空间4.2 子空间 1. 置换矩阵 定义&#xff1a; 用于行互换的矩阵P。 之前进行ALU分解时&#xff0c;可能存在该行主元为0&#xff0c;要进行行互换&#xff0c;即PALU 性质&#xff1…...

编程日记 2025/2/19 23:21:53

移动通信发展史

概念解释 第一代网络通信 1G 第二代网络通信 2G 第三代网络通信 3G 第四代网络通信 4G 4g网络有很高的速率和很低的延时——高到500M的上传和1G的下载 日常中的4G只是用到了4G技术 运营商 移动-从民企到国企 联通-南方教育口有人 电信 铁通&#xff1a;成立于 2000 年…...

编程日记 2025/2/19 23:20:52

Python MoviePy 视频处理全攻略：从入门到实战案例

第1章 环境安装与配置 # 案例1&#xff1a;安装MoviePy及FFmpeg !pip install moviepy # Windows安装FFmpeg&#xff1a;https://ffmpeg.org/download.html # Linux: sudo apt-get install ffmpeg# 验证安装 from moviepy.editor import * print("MoviePy版本:", __…...

编程日记 2025/2/19 23:15:46

uniapp webview嵌入外部h5网页后的消息通知

最近开发了个oa系统&#xff0c;pc端的表单使用form-create开发&#xff0c;form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发&#xff0c;但是因为form-create移动端只支持vant&#xff0c;不支持uniapp。官…...

编程日记 2025/2/19 23:09:36

macos安装jmeter测试软件

java环境安装 a. 验证安装环境 java -version # 如果有版本信息&#xff0c;说明已安装 b. 安装jdk # 安装 Homebrew&#xff08;如未安装&#xff09; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 安装 O…...

编程日记 2025/2/19 23:08:34

【virtiofs】ubuntu24.04+qemu7.0调试virtiofs

文章目录 编译qemu编译buildroot编译linux-6.8.1编译virtiofsd启动脚本qemu调试方法环境： win11 + vmware17 ubuntu24.04 buildroot git clone git://git.busybox.net/buildroot linux-6.8.1 https://mirrors.edge.kernel.org/pub/linux/kernel/v6.x/linux-6.8.1.tar.gz virti…...

编程日记 2025/2/19 23:06:31

DeepSeek 和 ChatGPT 在特定任务中的表现：逻辑推理与创意生成

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ Linux网络编程笔记&#xff1a; https://blog.cs…...

编程日记 2025/2/19 23:05:30

MoE硬件部署

文章目录 MoE硬件部署硬件需求**专家硬件映射&#xff1a;模块化计算单元****路由硬件加速&#xff1a;门控网络专用单元****内存与通信优化****能效控制策略****实例&#xff1a;假设部署Mixtral 8x7B到自研AI芯片** 资源分配硬件资源预分配&#xff08;编译时&#xff09;运行…...

编程日记 2025/2/19 23:01:23

MYSQL中的性能调优方法

MySQL性能调优是数据库管理的重要工作之一&#xff0c;目的是通过调整系统配置、优化查询语句、合理设计数据库架构等方法&#xff0c;提高数据库的响应速度和处理能力。以下是常见的MySQL性能调优方法&#xff0c;结合具体的案例进行说明。 1. 优化查询语句 查询语句是数据库…...

编程日记 2025/2/19 23:00:21

Day48（补）【AI思考】-设计模式三大类型统一区分与记忆指南

文章目录 设计模式三大类型统一区分与记忆指南**一、创建型模式&#xff08;对象如何生&#xff1f;&#xff09;****二、结构型模式&#xff08;对象如何组&#xff1f;&#xff09;****三、行为型模式&#xff08;对象如何动&#xff1f;&#xff09;****1. 行为型类模式&…...

编程日记 2025/2/19 22:57:18

公牛充电桩协议对接单车汽车平台交互协议外发版

充电设备与平台交互协议-外发版 V1.0.0.05 1 充电设备与平台交互协议 &#xff08;外发版&#xff09; 充电设备与平台交互协议-外发版 V1.0.0.05 2 版本 版本日期 修改人 版本说明 1.0.0.00 2022.05.05 研发部 外发初版 1.0.0.01 2022.08.26 研发部 0x32 增加鉴权参数 0x34 增…...

编程日记 2025/2/19 22:53:08

大语言模型内容安全的方式有哪些

大语言模型内容安全的方式有哪些 LLM（大语言模型）内容安全方式主要是通过技术手段对模型生成的内容进行检测、过滤和干预，以确保输出符合道德、法律和社会规范。以下是一些常见的方式方法及其原理和著名的应用案例： 基于规则的过滤 原理：制定一系列明确的规则和模式，例…...

编程日记 2025/2/19 22:47:00

【ISO 14229-1:2023 UDS诊断（ECU复位0x11服务）测试用例CAPL代码全解析⑩】

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase10 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月18日 关键词&#xff1a;UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-010测试用例 用例ID测试场景验证要点参考条款预期结果TC…...

编程日记 2025/2/19 22:42:55

Android WindowContainer窗口结构

Android窗口是根据显示屏幕来管理&#xff0c;每个显示屏幕的窗口层级分为37层&#xff0c;0-36层。每层可以放置多个窗口&#xff0c;上层窗口覆盖下面的。 要理解窗口的结构&#xff0c;需要学习下WindowContainer、RootWindowContainer、DisplayContent、TaskDisplayArea、T…...

编程日记 2025/2/19 22:37:45

从零到一实现微信小程序计划时钟：完整教程

在本教程中&#xff0c;我们将一起实现一个微信小程序——计划时钟。这个小程序的核心功能是帮助用户添加任务、设置任务的时间范围&#xff0c;并且能够删除和查看已添加的任务。通过以下步骤&#xff0c;我们将带你从零开始实现一个具有基本功能的微信小程序计划时钟。 项目…...

编程日记 2025/2/19 22:34:40

moveable 一个可实现前端海报编辑器的 js 库

目录 缘由-胡扯本文实验环境通用流程1.基础移动1.1 基础代码1.1.1 data-* 解释 1.2 操作元素创建1.3 css 修饰1.4 cdn 引入1.5 js 实现元素可移动1.6 图片拖拽2.缩放3.旋转4.裁剪 懒得改文案了&#xff0c;海报编辑器换方案了&#xff0c;如果后面用别的再更。 缘由-胡扯 导火…...

编程日记 2025/2/19 22:32:38

wangEditor 编辑器 Vue 2.0 + Nodejs 配置

资料 Vue2.0 版本的安装&#xff1a;https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置&#xff1a;https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 安装步骤 1.安装界面基础部分 <!-- 富文本编辑器…...

编程日记 2025/2/19 22:23:24

DeepSeek R1生成图片总结2（虽然本身是不能直接生成图片，但是可以想办法利用别的工具一起实现）

DeepSeek官网 目前阶段&#xff0c;DeepSeek R1是不能直接生成图片的&#xff0c;但可以通过优化文本后转换为SVG或HTML代码&#xff0c;再保存为图片。另外&#xff0c;Janus-Pro是DeepSeek的多模态模型&#xff0c;支持文生图&#xff0c;但需要本地部署或者使用第三方工具。…...

编程日记 2025/2/19 22:22:23

x86平台基于Qt+opengl优化ffmpeg软解码1080P视频渲染效率

一般的在arm嵌入式平台&#xff0c;大多数板子都要硬解码硬件渲染的框架&#xff0c;使用即可。 在x86下比较麻烦了。 优化的思路一共有以下几个方面&#xff0c; 1. 软解码变成硬解码 2. 将YUV转QImage的操作转移到GPU 3. QWidget渲染QImage变成opengGL渲染AVFrame 这三点…...

编程日记 2025/2/19 22:21:22

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13