JavaScript事件 鼠标事件

article/2025/9/5 15:48:12

JavaScript事件,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说,有下面这些代 表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。

鼠标事件,就是用鼠标完成的交互动作,鼠标事件是 Web 开发中最常用的事件类型

鼠标事件类型

 

鼠标点击事件包括4个:click(单机)dblclick(双击)、mousedown(按下)

和 mouseup(松开),其中click件类型比较常用,而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。

鼠标点击示例:

鼠标移动,mousemove 事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。

示例:

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时,将触发 mouseover 事件;而当把鼠标指针移出某个元素时,将触发 mouseout 事件。如果从父元素中移到子元素中时,也会触发父元素的 mouseover 事件类型。

当一个事件发生后,可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标,可以使用 srcElement 属性。


http://chatgpt.dhexx.cn/article/xLolkMYE.shtml

相关文章

JavaScript 鼠标移动事件

今天我要分享的JavaScript鼠标移动事件的知识点 1.首先准备一个文件夹和一张GIF的动图,打开VS Code,新建一个文件,CtrlS保存文件,输入文件名,文本类型设置成HTML,如下图所示; 2.在文档里输入英文状态下的感…

js 鼠标按下并移动事件

html源码&#xff1a; <divonMouseDown{(e) >fn1(e)}onMouseUp{(e)>fn2(e)}>内容</div> js源码 fn1(event) > { //鼠标按下事件console.log(onMouseDown, event); //鼠标按下时移动鼠标事件&#xff08;鼠标未抬起&#xff09;document.onmousemove fun…

JS小技巧:鼠标悬停事件

简单的JS悬停图片变换 不多bb先看效果图 可以看到鼠标悬停在不同的标题上时&#xff0c;下方的图片会产生相应变换 代码如下 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>* {margin: 0;p…

js鼠标事件

通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移出元素时运行脚本 onmouseover 当鼠标指针移…

用js给div添加鼠标悬停事件

新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构:\ 是div class"innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj document.getElementsByTagName("div&quo…

JavaScript的DOM之鼠标悬浮事件

JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理&#xff1a; 就是当鼠标在这块区域时候会触发相应事件&#xff0c;将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang"en"> <…

如何调试JS中鼠标悬停事件影响的元素?

如何调试JS中鼠标悬停事件影响的元素&#xff1f; 在日常的前端开发中&#xff0c;我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具&#xff0c;在 Elements,Console,Network,Sources,Performance 等多个 Tab 之间来回穿梭。 今天笔者来分…

js实现鼠标悬停事件

介绍&#xff1a;把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第一个JS</title><style>#div1 {width: 100px;height: 100px;background-color: red;b…

宜搭低代码与Faas构建数据看板

写在前面 数字化办公兴起&#xff0c;企业改变办公方式迫在眉睫&#xff0c;低代码是一个发展方向 目录 写在前面 环境及目的 表单&连接器&Faas 表单 连接器&Faas Faas 连接器配置 结语 环境及目的 平台&#xff1a;钉钉宜搭低代码 Faas:nodejs v12.20.0 …

faas函数使用

faas-cli 是一款 OpenFaaS 官方工具&#xff0c;在faas项目中使用频繁&#xff0c;作为与API GateWay沟通的桥梁工具&#xff0c;相当重要。它用于创建、部署OpenFaas函数应用 &#xff0c;支持从多种语言模板构建 (例如 Node.js, Python, CSharp and Ruby).&#xff0c;在实际…

Nodejs也能Serverless?从0开始用Nodejs打造一个FaaS服务

本篇文章并不是教你怎么用阿里云、谷歌云等等云框架的FaaS服务&#xff0c;而是教你如何从0开始打造一个自己的FaaS服务。 受限于人力及成本原因&#xff0c;现在的FaaS服务基本上可以说是“大厂玩物”&#xff0c;而网上鲜有相关代码的实现&#xff0c;因此我才打算写一篇文章…

OpenFaaS介绍

FaaS 云计算时代出现了大量XaaS形式的概念&#xff0c;从IaaS(Infrastructure as a Service)、PaaS(Platform as a Service)、SaaS(Software as a Service)到容器云引领的CaaS(Containers as a Service)&#xff0c;再到火热的微服务架构&#xff0c;它们都在试着将各种软、硬…

深入理解无服务器架构(Faas/Serverless)

摘要 无服务器架构(Faas/Serverless)&#xff0c;是软件架构领域的热门话题。 AWS&#xff0c;Google Cloud和Azure - 在无服务器上投入了大量资金&#xff0c;已经在看到了大量专门针对Faas/Serverless的文章、书籍&#xff0c;开源项目&#xff0c;会议。 但什么是无服务器&…

PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

云计算&#xff08;cloud computing&#xff09; 关于云计算的定义有多种说法&#xff0c;现阶段广为接受的是美国国家标准与技术研究院&#xff08;NIST&#xff09;定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&…

云计算服务类型都是什么?IaaS、PaaS、SaaS、BaaS、FaaS

云计算服务类型都是什么&#xff1f;IaaS、PaaS、SaaS、BaaS、FaaS 基本概念 云计算主要分为 4 种类型&#xff1a;私有云、公共云、混合云和多云。 同时&#xff0c;云计算服务主要有 3 种&#xff1a;基础架构即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;P…

简单介绍一下Serverless和Faas

一、啥叫Serverless(无服务器) Like many trends in software, there’s no one clear view of what Serverless is. For starters, it encompasses two different but overlapping areas: (就是一般定义为两种不同但交叉的领域&#xff1a;Faas和Baas) Serverless was first…

Faas

文章介绍了Faas是什么&#xff0c;FaaS的特点、以及它的好处&#xff0c;和基于Kubernetes的FaaS框架Fission等&#xff0c;希望能对您有所帮助。 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈…

XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,Serverless和FaaS 概念

XaaS IaaS、PaaS、SaaS CaaS&#xff0c;Serverless 和FaaS 和lambda 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈起的Serverless和FaaS,我们正在经历?一个技术飞速变革的时代。 一、什么是…

IaaS, PaaS, SaaS, BaaS, Faas

aaS 是 As-a-Service 即为服务 的意思。 IaaS (Infrastructure as a Service) wikipedia&#xff1a;基础设施即服务 服务商提供底层/物理层基础设施资源&#xff08;服务器&#xff0c;数据中心&#xff0c;环境控制&#xff0c;电源&#xff0c;服务器机房&#xff09;&…

云原生:什么是 FaaS ?

概述 FaaS&#xff0c;Function as a Service&#xff0c;"功能即服务"&#xff08;也译作“函数即服务”&#xff09;&#xff0c;是一种在无状态容器中运行的事件驱动型计算执行模型&#xff0c;这些功能将利用服务来管理服务器端逻辑和状态。 它允许开发人员以功…