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

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

news 2026/2/10 9:07:46

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2026/1/22 13:36:20

作为点的对象CenterNet论文阅读

摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表&#xff0c;并对每一个位置进行分类。这种做法既浪费又低效&#xff0c;并且需要额外的后处理。在本文中&#xff0c;我们采取了不同的方法。我们将物体建模为单…...

编程新知 2026/2/6 1:11:20

linux设备重启后时间与网络时间不同步怎么解决？

linux设备重启后时间与网络时间不同步怎么解决&#xff1f; 设备只要一重启&#xff0c;时间又错了/偏了&#xff0c;明明刚刚对时还是对的&#xff01; 这在物联网、嵌入式开发环境特别常见&#xff0c;尤其是开发板、树莓派、rk3588 这类设备。 解决方法&#xff1a; 加硬件…...

编程新知 2025/10/5 13:11:58