百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

JavaScript HTML DOM 事件 js dom操作

zhezhongyun 2024-12-19 17:53 55 浏览

今天我们介绍下JavaScript HTML DOM事件，即对事件作出反应，JavaScript 能够在事件发生时执行，比如用户对dom元素(比如按钮、div、span...)进行某种操作行为(单击、双击、鼠标移入、键盘按下等)，页面会做出相应的响应。事件通常与函数结合使用，在事件发生之前函数不会被执行。

我们介绍一些常用的事件及方法。我们将这些事件大概分为鼠标事件，键盘事件和页面事件三类。

  • 鼠标事件

事件

描述

属于

onmousedown

当用户在元素上按下鼠标按钮时，发生此事件。

MouseEvent

onmouseenter

当指针移动到元素上时，发生此事件。

MouseEvent

onmouseleave

当指针从元素上移出时，发生此事件。

MouseEvent

onmousemove

当指针在元素上方移动时，发生此事件。

MouseEvent

onmouseout

当用户将鼠标指针移出元素或其中的子元素时，发生此事件。

MouseEvent

onmouseover

当指针移动到元素或其中的子元素上时，发生此事件。

MouseEvent

onmouseup

当用户在元素上释放鼠标按钮时，发生此事件。

MouseEvent

onclick

当用户单击元素时发生此事件。

MouseEvent

oncontextmenu

当用户右键单击某个元素以打开上下文菜单时，发生此事件。

MouseEvent

ondblclick

当用户双击元素时发生此事件。

MouseEvent


  • 键盘事件


事件

描述

属于

onkeydown

当用户正在按下键时，发生此事件。

KeyboardEvent

onkeypress

当用户按下键时，发生此事件。

KeyboardEvent

onkeyup

当用户松开键时，发生此事件。

KeyboardEvent


  • 页面事件


事件

描述

属于

onload

当用户进入页面时触发，事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。也可用于处理 cookie。在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

  • UiEvent
  • Event

onunload

当用户及离开页面时触发。可用于处理 cookie。

  • UiEvent
  • Event

onblur

当元素失去焦点时发生此事件。

FocusEvent

onfocus

在元素获得焦点时发生此事件。

FocusEvent

onfocusin

在元素即将获得焦点时发生此事件。

FocusEvent

onfocusout

在元素即将失去焦点时发生此事件。

FocusEvent


今天的内容先了解到这，我们下次就正式开始详细介绍事件的方法用法了。

相关推荐

Chinese vice premier calls for multilateralism at Davos

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...

用C++ Qt手把手打造炫酷汽车仪表盘

一、项目背景与核心价值在车载HMI（人机交互界面）开发领域，虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块，涵盖以下技术要点：Qt图形绘制核心机制（QPa...

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能

点击“了解更多”获取工具亲爱的BCGSoft用户，我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布！新版本支...

雅居乐上调出售吉隆坡项目保留金，预计亏损扩大至6.64亿元

1月2日，雅居乐集团（03383.HK）发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告，2023年11月8日（交易时段后），集团子公司AgileRealEstateDeve...

Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...

手机性能好不好 GPU玄学曲线告诉你

前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”，所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下，在系统“开发者选项中被称为“GPU显示配置文件”或...

小迈科技 X Hologres:高可用的百亿级广告实时数仓建设

通过本文，我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月，是一家致力以数字化领先为优势，实现业务高质量自增长的移动互联网科技公司。始...

vue3新特征和所有的属性，方法汇总及其对应源码分析

vue3新特征汇总与源码分析（备注：vue3使用typescript编写）何为应用？constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...

China's stability redefines global trade in a volatile era

ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...

QML 实现图片帧渐隐渐显轮播

前言所谓图片帧渐隐渐显轮播就是，一组图片列表，当前图片逐渐改变透明度隐藏，同时下一张图片逐渐改变透明度显示，依次循环，达到渐隐渐显的效果，该效果常用于图片展示，相比左右自动切换的轮播方式来说，这种方式...

前端惊魂夜:我竟在CSS里写出了JavaScript?

凌晨两点，写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底，屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果，我翻遍了MDN文档，试遍了所有已知的CSS技巧，却始终差那么一口气。“要是CSS...

10 个派上用场的 Flutter 小部件

尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...

让我的 Flutter 代码整洁 10 倍的 5 种

如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画，猜猜怎么着？你已经使用过Mixin了——恭喜你，你已经处于一段你甚至不知道的关...

daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库

漂亮有特色的CSS组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库，...

一周热门
最近发表
标签列表