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

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/71332.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis7——基础篇（四）

Redis7——基础篇（四）

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09;Redis&#xff08;二&#xff09;Redis&#xff08;三&#xff09; 接上期内容&…
阅读更多...
Sprinig源码解析

Sprinig源码解析

前言 Spring 框架是 Java 企业级开发的基石&#xff0c;其源码设计体现了模块化、扩展性和灵活性。以下从 IoC 容器、AOP 实现、核心模块和关键设计模式四个角度对 Spring 源码进行深度解析&#xff0c;帮助理解其底层机制。即使Spring会使用的人见得就能使用。 一、IoC 容器源…
阅读更多...
如何简单的去使用jconsloe 查看线程 (多线程编程篇1)

如何简单的去使用jconsloe 查看线程 (多线程编程篇1)

目录 前言 1.进程和线程 进程 PCB 的作用 并发编程和并行编程 线程 为什么选择多线程编程 2.在IDEA中如何简单创建一个线程 1. 通过继承Thread类 2. 通过实现 Runnable 接口 3. 使用 Lambda 表达式 3.如何简单使用jconsloe去查看创建好的线程 前言 2025来了,这是第…
阅读更多...
【ISO 14229-1:2023 UDS诊断（ECU复位0x11服务）测试用例CAPL代码全解析④】

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

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase04 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月17日 关键词&#xff1a;UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-004测试用例 用例ID测试场景验证要点参考条款预期结果TC…
阅读更多...
3.10 实战Hugging Face Transformers：从文本分类到模型部署全流程

3.10 实战Hugging Face Transformers：从文本分类到模型部署全流程

实战Hugging Face Transformers：从文本分类到模型部署全流程 一、文本分类实战：IMDB电影评论情感分析 1.1 数据准备与预处理 from datasets import load_dataset from transformers import AutoTokenizer # 加载IMDB数据集 dataset = load_dataset("imdb") …
阅读更多...
【人工智能】释放数据潜能：使用Featuretools进行自动化特征工程

【人工智能】释放数据潜能：使用Featuretools进行自动化特征工程

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 特征工程是机器学习流程中至关重要的一步，它直接影响模型的性能。然而，手动特征工程既耗时又需要领域专业知识。Featuretools是一个强大的…
阅读更多...
MybaitsPlus学习笔记（二）基本CURD

MybaitsPlus学习笔记（二）基本CURD

目录 一、BaseMapper 二、常用实例 1、插入 2、删除 3、修改 4、查询 三、IService 四、 IService中的一些方法测试 一、BaseMapper MyBatis-Plus中的基本CRUD在内置的BaseMapper中都已得到了实现&#xff0c;我们可以直接使用&#xff0c;接口如 下&#xff1a; publ…
阅读更多...
设计模式之适配模式是什么？以及在Spring AOP中的拦截器链的使用源码解析。

设计模式之适配模式是什么？以及在Spring AOP中的拦截器链的使用源码解析。

前言 本文涉及到适配模式的基本用法&#xff0c;以及在Spring AOP中如何使用&#xff0c;首先需要了解适配模式的工作原理&#xff0c;然后结合Spring AOP的具体实现来详细详细解析源码。 首先&#xff0c;适配模式&#xff0c;也就是Adapter Pattern&#xff0c;属于结构型设计…
阅读更多...
【C++】36.C++IO流

【C++】36.C++IO流

文章目录 1. C语言的输入与输出2. 流是什么3. CIO流3.1 C标准IO流3.2 C文件IO流 4. stringstream的简单介绍 1. C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 scanf(): 从标准输入设备(键盘)读取数据&#xff0c;并将值存放在变量中。pri…
阅读更多...
JavaScript表单介绍

JavaScript表单介绍

一、表单的基本概念 在网页开发里&#xff0c;表单是实现用户与网页交互的关键组件&#xff0c;用于收集用户输入的数据&#xff0c;JavaScript 则能为表单增添强大的交互性和功能性。表单在 HTML 里通过 <form> 标签创建&#xff0c;包含多种表单元素&#xff0c;如文本…
阅读更多...
哈希表（C语言版）

哈希表（C语言版）

文章目录 哈希表原理实现(无自动扩容功能)代码运行结果 分析应用 哈希表 如何统计一段文本中&#xff0c;小写字母出现的次数? 显然&#xff0c;我们可以用数组 int table[26] 来存储每个小写字母出现的次数&#xff0c;而且这样处理&#xff0c;效率奇高。假如我们想知道字…
阅读更多...
昆虫-目标检测数据集（包括VOC格式、YOLO格式）

昆虫-目标检测数据集（包括VOC格式、YOLO格式）

昆虫-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接: https://pan.baidu.com/s/1tYb8s-AVJgSp7SGvqdWF9A?pwdt76a 提取码: t76a 数据集信息介绍&#xff1a; 共有 6009 张图像和一一对应的标注文件 标注文件格式提供了两种&#x…
阅读更多...
C++(23)：unreachable

C++(23)：unreachable

C++23在头文件 "><utility>定义了std::unreachable()，用于指示编译器，该段代码不应该被允许，因此编译器可以对该位置进行优化，如果一旦允许了该位置的代码，行为未定义： #include <utility> #include <iostream>using namespace std;int func(…
阅读更多...
备战蓝桥杯 Day1 回顾语言基础

备战蓝桥杯 Day1 回顾语言基础

开启蓝桥杯刷题之路 Day1 回顾语言基础 1.配置dev 工具->编译选项->勾选编译时加入以下命令->设定编译器配置(release和debug)都要-> -stdc11 ->代码生成/优化->代码生成/优化->语言标准(-std)->ISO C11 ->代码警告->显示最多警告信息(-Wall)…
阅读更多...
python学opencv|读取图像（七十五）人脸识别：Fisherfaces算法和LBPH算法

python学opencv|读取图像（七十五）人脸识别：Fisherfaces算法和LBPH算法

【1】引言 前序学习进程中&#xff0c;已经掌握了使用Eigenfaces算法进行的人脸识别。相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;七十四&#xff09;人脸识别&#xff1a;EigenFaces算法-CSDN博客 在此基础上&#xff0c;学习剩余两种人脸识别算法&am…
阅读更多...
React 前端框架介绍

React 前端框架介绍

什么是 React&#xff1f; React 是一个由 Facebook 开发并维护的开源 JavaScript 库&#xff0c;用于构建用户界面。它主要用于创建交互式用户界Face&#xff08;UI&#xff09;&#xff0c;尤其是当数据变化时需要更新部分视图时非常有效。React 的核心思想是组件化和声明性…
阅读更多...
包装类的空指针异常

包装类的空指针异常

问题&#xff1a; Integer是引用对象&#xff0c;当初始化不进行赋值的时候是null,是null就不可以自动拆箱 实践&#xff1a; public class Test {public static void main(String[] args) {Integer num null;//自动拆箱int i num;} } 会包异常信息&#xff1a; Excepti…
阅读更多...
【Elasticsearch】检索选定字段（Retrieve selected fields）

【Elasticsearch】检索选定字段（Retrieve selected fields）

在 Elasticsearch 中&#xff0c;检索选定字段&#xff08;Retrieve selected fields&#xff09;是一个重要的功能&#xff0c;用于优化查询性能和减少数据传输量。以下是结合所有回答的详细总结&#xff0c;涵盖每种字段检索方式的原理、应用场景、性能特点以及限制。 1._so…
阅读更多...
【MySQL】 基本查询(下)

【MySQL】 基本查询(下)

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;【MySQL】 基本查询(下) 发布时间&#xff1a;2025.2.18 隶属专栏&#xff1a;MySQL 目录 Update语法案例 Delete删除数据语法案例 截断表语法案例 插入查询结果语法案例 聚合函数函数介绍案例 group by子句的使用语…
阅读更多...
docker 基础命令使用(ubuntu)

docker 基础命令使用(ubuntu)

docker 状态查询 docker ps docker ps -adocker --version docker info docker --help docker run --help docker ps --help ...docker 操作镜像命令 docker imagesdocker rmi 镜像id/镜像名docker 操作容器命令 docker ps docker ps -adocker run 命令 # 端口映射 -p 参数…
阅读更多...
最新文章

Copyright @ 2022~2023