【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )

文章目录

  • 一、" 事件 " 开发步骤
    • 1、" 事件 " 开发步骤
    • 2、完整代码示例
  • 二、常见鼠标 " 事件 "
    • 1、常见鼠标 " 事件 "
    • 2、鼠标 " 事件 " 代码示例


Web APIs 博客相关参考文档 :

  • WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API
  • getElementById 函数参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById
  • Element 对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Element
  • getElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName
  • HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
  • getElementsByClassName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName
  • querySelector 函数文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  • 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
  • querySelectorAll 函数 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
  • NodeList 对象 : https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList





一、" 事件 " 开发步骤




1、" 事件 " 开发步骤


" 事件 " 开发步骤 :

  • 首先 , 获取事件源 , 通过 querySelector 函数 传入 CSS 选择器 , 可获取事件源 ;
        // 1. 获取事件源var div = document.querySelector('div');
  • 然后 , 绑定事件 , 上个步骤获取了 div 元素 , div.onclick 就是要绑定的鼠标点击事件 ;
        // 2. 绑定事件// 要绑定的是事件源 div 的 onclick 点击事件// div.onclick 就是要绑定的事件
  • 最后 , 添加事件处理程序 , 下面为 div.onclick 添加了一个匿名函数 , 作为事件处理程序 ,
        // 3. 添加事件处理程序div.onclick = function() {div.innerHTML = "已点击"console.log("点击 div 元素");}

2、完整代码示例


完整代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style></head><body><div id="hello">未点击</div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 1. 获取事件源var div = document.querySelector('div');// 2. 绑定事件// 要绑定的是事件源 div 的 onclick 点击事件// div.onclick 就是要绑定的事件// 3. 添加事件处理程序div.onclick = function() {div.innerHTML = "已点击"console.log("点击 div 元素");}</script>
</body></html>

执行结果 :

在这里插入图片描述

在这里插入图片描述





二、常见鼠标 " 事件 "




1、常见鼠标 " 事件 "


常见鼠标 " 事件 " :

  • 鼠标点击 : onclick ;
  • 鼠标经过 : onmouseover ;
  • 鼠标离开 : onmouseout ;
  • 获得焦点 : onfocus ;
  • 失去焦点 : onblur ;
  • 鼠标移动 : onmousemove ;
  • 鼠标按下 : onmousedown ;
  • 鼠标抬起 : onmouseup ;

2、鼠标 " 事件 " 代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style></head><body><div id="hello">未点击</div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 1. 获取事件源var div = document.querySelector('div');// 2. 绑定事件// 要绑定的是事件源 div 的 onclick 点击事件// div.onclick 就是要绑定的事件// 3. 添加事件处理程序div.onclick = function() {div.innerHTML = "已点击"console.log("点击 div 元素");}div.onmouseover = function() {console.log("鼠标经过");}div.onmouseout = function() {console.log("鼠标离开");}div.onmousemove = function() {console.log("鼠标移动");}div.onmousedown = function() {console.log("鼠标按下");}div.onmouseup = function() {console.log("鼠标抬起");}</script>
</body></html>

执行结果 :

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Linux中Vim的使用技巧总结

日常工作中&#xff0c;Vim使用方式&#xff1a; 功能命令说明光标移动h向左移动光标j向下移动光标k向上移动光标l向右移动光标w移动到下一个单词的开始处e移动到下一个单词的结束处b移动到上一个单词的开始处0 (数字零)移动到当前行的开始处$移动到当前行的末尾gg移动到文件的…

6个步骤实现 Postman 接口压力测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、第一步接口可以通的情况下点击右上角save 2、将相应信息填入 3、如果是同一个接口修改不同的…

大型国民老牌药品医疗企业如何借助实时数仓冲破数据孤岛桎梏,拥抱数据驱动的经营管理模式

使用 TapData&#xff0c;化繁为简&#xff0c;摆脱手动搭建、维护数据管道的诸多烦扰&#xff0c;轻量代替 OGG、DSG 等同步工具&#xff0c;「CDC 流处理 数据集成」组合拳&#xff0c;加速仓内数据流转&#xff0c;帮助企业将真正具有业务价值的数据作用到实处&#xff0c…

Mysql: 数据模型

一.关系型数据库 概念:建立在关系型基础上,由多张相互连接的二维表组成的数据库。 1.关系型数据库: 2.特点&#xff1a; 1.使用表存储数据,格式统一,便于维护。 2.使用SQL语言操作,标准统一,使用方便。 3.数据模型 通过客户端连接DBMS可以创建多个数据库,在数据库中…

如何在Java中处理ParseException异常?

如何在Java中处理ParseException异常&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;ParseException异常是开发者在处理…

322. 零钱兑换-c语言

322. 零钱兑换-c语言 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1 。 你可以认为每种硬…

光伏半导体的种类

光照射半导体材料时&#xff0c;其电导率发生变化的实质是光生载流子的产生。在半导体中&#xff0c;价带中的电子受到一定能量的光子激发后&#xff0c;可以跃迁到导带&#xff0c;形成自由电子和空穴对&#xff0c;即光生载流子。这些光生载流子会增加半导体的导电能力&#…

ZOOM太卡怎么办?公司如何解决ZOOM会议卡顿?

ZOOM作为一种常见的办公工具&#xff0c;尤其在跨国公司和外资企业中&#xff0c;在线会议非常普遍。然而&#xff0c;由于ZOOM的服务器部署在国外&#xff0c;国内用户使用时可能会遇到卡顿、不稳定和声音断续等问题。那么&#xff0c;如何有效解决ZOOM卡顿的问题呢&#xff1…

「AIGC」LangChain

LangChain 是一个开源的自然语言处理(NLP)框架,它旨在帮助开发者快速构建和部署基于语言模型的应用程序。以下是一份针对初学者的快速入门指南,将帮助你了解LangChain的基本概念和如何开始使用它。 1. LangChain 简介 LangChain 是一个基于 Python 的库,它提供了一系列的…

2024国有企业数字化转型的意义和作用是什么?

一、当下国有企业数字化转型最新的意义及作用是什么? 数字化转型对国有企业具有深远的意义&#xff0c;不仅是企业的内在需求&#xff0c;更是国家经济发展的重要支撑。据研究表明&#xff0c;数字化相关技术可为企业提升约60%的作业效率&#xff0c;降低20%的人力成本&#…

C++核心知识

一、类 类的声明: class 类名 { [public:] [数据成员声明] [函数成员声明] [private:] [数据成员声明] [函数成员声明] [protected:] [数据成员声明] [函数成员声明] } 类函数成员的实现 类声明体内直接实现 类体外&#xff0c;使用域预算符&#xff08;::&#xff09; 如 sho…

Linux安装Docker方法

自动安装 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun手动安装 1.安装gcc yum -y install gcc2.安装gcc-c yum -y install gcc-c以上2步不装也没事 3.依赖环境 安装依赖环境 yum -y install yum-utils device-mapper-persistent-datalvm24.添加…

项目训练营第五天

项目训练营第五天 后端代码优化 通用异常处理类编写 Data public class BaseResponse<T> implements Serializable {int code;T data;String message null;String description null;public BaseResponse(int code, T data, String message, String description) {th…

【智能算法】覆盖算法

目录 一、概述 二、常见覆盖算法 2.1 贪心算法 2.1.1 定义 2.1.2 特点 2.1.3 matlab代码解析 2.2 排列算法 2.2.1 定义 2.2.2 特点 2.2.3 matlab代码解析 2.3 基于生命周期的覆盖算法 2.3.1 定义 2.3.2 特点 2.3.3 matlab代码解析 2.4 分簇算法 2.4.1 定义 2.4…

数据库表空间的使用

此处以PosrgresSql数据库为例&#xff1a; 在PostgreSQL中&#xff0c;表空间&#xff08;Tablespace&#xff09;用于控制数据库对象&#xff08;如表、索引&#xff09;的存储位置。使用表空间可以将数据库对象存储在特定的磁盘位置&#xff0c;从而优化性能和管理存储。以下…

Qt画实时曲线图

Qt引入QcustomPlot 首先下载QcustomPlot源代码&#xff0c;https://github.com/qcustomplot/qcustomplot 下载zip文件 运行所下载的项目生成库文件libqcustomplotd2.a文件和qcustomplotd2.dll文件。 在项目中添加printsupport。 并将qcustomplot.h文件和qcustomplot.cpp文…

如何在 C++/Qt/CMake 项目中构建 Rust 代码

问题描述 我有一个使用 CMake 构建的现有 C/Qt 项目&#xff0c;我想开始添加 Rust 代码&#xff0c;并能够从主 C 代码库中调用这些 Rust 代码。应该如何组织项目结构&#xff1f; 现有项目结构 ./CMakeLists.txt ./subproject-foo/CMakeLists.txt ./subproject-foo/src/..…

Tomcat(1)

Tomcat(1) 1.Tomcat简介 Tomcat和Nginx、Apache(http)、Web服务器一样&#xff0c;具有处理HTML面的功能&#xff0c;不过tomcat处理静态HTML能力不如nginx服务器 一个tomcat默认并发数是200(官方) 使用方案&#xff1a; nginx和tomcat配合&#xff0c;nginx处理静态&#x…

万物皆对象,你信吗?

**内存空间和数据都消失&#xff0c;数据怎么会消失的&#xff1f;**空间没了&#xff0c;数据自然也跟着消失。因为数据就是在空间里面的。就像宇宙大爆炸&#xff0c;我们还能存在嘛&#xff0c;是不是已经undefined了。「一块小内存上有2种数据类型」 内部存储的数据 地址值…

Trilium Notes浏览器插件保存网页内容到docker私有化部署

利用Trilium浏览器插件可以很方便的把网页内容保存到Trilium&#xff0c;需要先在docker部署好trilium&#xff0c;还没有部署的可以先看这篇文章&#xff1a;trilium笔记私有化部署-www.88531.cn资享网 1.下载Trilium浏览器插件&#xff1a;https://www.npspro.cn/33462.html…