程序员经验分享-hwhale

HTML DOM 事件

2023-05-16

 

1.      HTML DOM 事件

参考文档：https://www.runoob.com/jsref/dom-obj-event.html

 

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

提示： 在 W3C 2 级 DOM 事件中规范了事件模型。

 

HTML DOM 事件

DOM： 指明使用的 DOM 属性级别。

鼠标事件

属性

描述

DOM

onclick

当用户点击某个对象时调用的事件句柄。

2

oncontextmenu

在用户点击鼠标右键打开上下文菜单时触发

 

ondblclick

当用户双击某个对象时调用的事件句柄。

2

onmousedown

鼠标按钮被按下。

2

onmouseenter

当鼠标指针移动到元素上时触发。

2

onmouseleave

当鼠标指针移出元素时触发

2

onmousemove

鼠标被移动。

2

onmouseover

鼠标移到某元素之上。

2

onmouseout

鼠标从某元素移开。

2

onmouseup

鼠标按键被松开。

 

 

键盘事件

属性

描述

DOM

onkeydown

某个键盘按键被按下。

2

onkeypress

某个键盘按键被按下并松开。

2

onkeyup

某个键盘按键被松开。

2

 

框架/对象（Frame/Object）事件

属性

描述

DOM

onabort

图像的加载被中断。 ( <object>)

2

onbeforeunload

该事件在即将离开页面（刷新或关闭）时触发

2

onerror

在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)

 

onhashchange

该事件在当前 URL 的锚部分发生修改时触发。

 

onload

一张页面或一幅图像完成加载。

2

onpageshow

该事件在用户访问页面时触发

 

onpagehide

该事件在用户离开当前网页跳转到另外一个页面时触发

 

onresize

窗口或框架被重新调整大小。

2

onscroll

当文档被滚动时发生的事件。

2

onunload

用户退出页面。 ( <body> 和 <frameset>)

2

 

表单事件

属性

描述

DOM

onblur

元素失去焦点时触发

2

onchange

该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

2

onfocus

元素获取焦点时触发

2

onfocusin

元素即将获取焦点时触发

2

onfocusout

元素即将失去焦点时触发

2

oninput

元素获取用户输入时触发

3

onreset

表单重置时触发

2

onsearch

用户向搜索域输入文本时触发 ( <input="search">)

 

onselect

用户选取文本时触发 ( <input> 和 <textarea>)

2

onsubmit

表单提交时触发

2

 

剪贴板事件

属性

描述

DOM

oncopy

该事件在用户拷贝元素内容时触发

 

oncut

该事件在用户剪切元素内容时触发

 

onpaste

该事件在用户粘贴元素内容时触发

 

 

打印事件

属性

描述

DOM

onafterprint

该事件在页面已经开始打印，或者打印窗口已经关闭时触发

 

onbeforeprint

该事件在页面即将开始打印时触发

 

 

拖动事件

事件

描述

DOM

ondrag

该事件在元素正在拖动时触发

 

ondragend

该事件在用户完成元素的拖动时触发

 

ondragenter

该事件在拖动的元素进入放置目标时触发

 

ondragleave

该事件在拖动元素离开放置目标时触发

 

ondragover

该事件在拖动元素在放置目标上时触发

 

ondragstart

该事件在用户开始拖动元素时触发

 

ondrop

该事件在拖动元素放置在目标区域时触发

 

 

多媒体（Media）事件

事件

描述

DOM

onabort

事件在视频/音频（audio/video）终止加载时触发。

 

oncanplay

事件在用户可以开始播放视频/音频（audio/video）时触发。

 

oncanplaythrough

事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。

 

ondurationchange

事件在视频/音频（audio/video）的时长发生变化时触发。

 

onemptied

当期播放列表为空时触发

 

onended

事件在视频/音频（audio/video）播放结束时触发。

 

onerror

事件在视频/音频（audio/video）数据加载期间发生错误时触发。

 

onloadeddata

事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。

 

onloadedmetadata

事件在指定视频/音频（audio/video）的元数据加载后触发。

 

onloadstart

事件在浏览器开始寻找指定视频/音频（audio/video）触发。

 

onpause

事件在视频/音频（audio/video）暂停时触发。

 

onplay

事件在视频/音频（audio/video）开始播放时触发。

 

onplaying

事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。

 

onprogress

事件在浏览器下载指定的视频/音频（audio/video）时触发。

 

onratechange

事件在视频/音频（audio/video）的播放速度发送改变时触发。

 

onseeked

事件在用户重新定位视频/音频（audio/video）的播放位置后触发。

 

onseeking

事件在用户开始重新定位视频/音频（audio/video）时触发。

 

onstalled

事件在浏览器获取媒体数据，但媒体数据不可用时触发。

 

onsuspend

事件在浏览器读取媒体数据中止时触发。

 

ontimeupdate

事件在当前的播放位置发送改变时触发。

 

onvolumechange

事件在音量发生改变时触发。

 

onwaiting

事件在视频由于要播放下一帧而需要缓冲时触发。

 

 

转载于:https://www.cnblogs.com/wodeboke-y/p/11180126.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

DOM

HTML DOM 事件 的相关文章

  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码

  • 如何使用 Scrapy 从网站获取所有纯文本？

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • IE 11 中的 CSS Display Flex 无法正常工作，图像会溢出

    我正在使用 CSSdisplay flex 以某种方式显示它们 在 Chrome 中 它看起来很完美 很漂亮 但在 IE 中 图像超出了我放置它们的元素 https jsfiddle net m42k7Lk5 8 https jsfiddl

  • Javascript 循环内的事件处理程序 - 需要闭包吗？

    我正在使用一些我从别人那里接管的 html 和 Javascript 代码 该页面每十秒重新加载一个数据表 通过异步请求 然后使用一些 DOM 代码重新构建该表 有问题的代码看起来像这样 var blah xmlres getElement

  • Chrome：当父级固定时，无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle

  • 如何为 HTML 元素创建鼠标拖动滑块？

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H

  • 如何在 PHP 的 HTML 页面中显示错误消息？

    我有以下登录表单 login php 其中要求输入用户名和密码

  • 使用 highcharts 时，为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div？

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确

  • 如何在 select2 下拉列表中换行？

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l

  • 如何使用 JavaScript 创建链接？

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使

  • 如何在codeigniter中将上传图片比例限制为16:9？

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload

  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面

  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html

  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o

  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

  • CSS溢出文本显示在几行中，没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • Latex论文复杂组合图片设计

    最近在使用Latex写博士论文 xff0c 中间遇到了一些想设计一幅图片中多个子图位置的问题 如果想画普通的横排多图或者竖排多图 xff0c 可以使用 begin figure centering subfigure includegrap

  • 打麻将清一色自摸后偏瘫？高血压患者这些事项要注意

    最近有一条让人哭笑不得的热搜 xff0c 上海一男子居然因为打麻将清一色自摸兴奋过度 xff0c 导致脑出血偏瘫了 细究原因 xff0c 是因为该男子平时就有高血压 xff0c 又爱打麻将 对此医生也提醒 xff0c 情绪过于激动时极易诱发

  • 对idea2020.1.1的遇坑实测【实时更新】

    1 第一坑 xff0c 你可以更换maven库 xff0c 但是不管你怎么换 xff0c idea2020 1 1还是会使用 m下的 虽然你在project structrue里看起来都很正常 xff0c 但是你一打包运行就会发现你的art

  • 在Ubuntu系统中编译C语言程序

    在Ubuntu系统中编译C语言程序 用gcc命令编译主程序main1 c 并运行在VC 43 43 6 0中编译主程序main1 c 并运行在ubuntu系统下用Makefile的方式编译主程序 用gcc命令编译主程序main1 c 并运行

  • STM32简单程序的编译——LED闪烁

    LED闪烁 程序编译总结 程序编译 默认已经完成MDK5软件和STM32包的安装 首先利用keil建立工程 打开Keil uVision5软件 xff0c 点击左上角的File xff0c 然后点击New建立新文件 然后点击Project选

  • Ubuntu下opencv的安装使用

    目录 一 Ubuntu下安装opencv二 Ubuntu下opencv摄像头的使用1 打开摄像头显示处理视频的程序2 改进 三 总结 一 Ubuntu下安装opencv 1 下载oencv 在ubuntu的浏览器中输入官网链接 https

  • Proteus仿真运行stm32程序

    目录 一 原理图二 keil程序编译三 proteus仿真四 总结 一 原理图 1 创建工程 打开proteus xff0c 选择新建工程 编辑名称和目录 xff0c 点击下一步 选择下图模板 选择创建固件项目 xff0c 系列选择Cort

  • 框式路由器MPU、SFU、LPU、SRU科普

    MPU xff08 Main Processing Unit xff09 主控单元SFU xff08 Switch Fabric Unite xff09 交换网板LPU xff08 Line Processing Unit xff09 线路

  • 在STM32下完成基于FreeRTOS的多任务程序

    目录 一 任务要求二 FreeRTOS移植1 简单介绍2 应用实例 一 任务要求 在STM32下完成一个基于FreeRTOS的多任务程序 xff0c 执行3个周期性task task1 xff0c 每间隔500ms闪烁 xff08 变化 x

  • 学习HTML后总结

    目录 一 HTML简介二 软件 插件使用三 HTML的文档结构1 元素2 文本格式3 标题4 超链接5 图片 文件路径img6 表格7 列表List8 表单Form9 其他内容 一 HTML简介 HTML是超文本标记语言 xff08 Hyp

  • 学习CSS后总结

    目录 一 CSS简介二 CSS语法三 CSS的生效方式四 CSS实际使用1 颜色 尺寸 对齐2 盒子模型3 边框与边距4 定位5 溢出6 浮动7 透明度8 组合选择器9 伪类和伪元素 一 CSS简介 CSS是级联样式表 xff08 Casc

  • 《通信软件开发与应用》课程结业报告

    目录 一 作业内容二 完成过程三 问题及解决办法四 仍然存在的问题五 总结 一 作业内容 要求 xff1a 完成一个静态网站的制作 可使用你喜欢的任何CSS框架如BootStrap MDB tailwind等 xff0c 页面不少于5个 x

  • prometheus + grafana 监控Mysql、主机、Redis超简入门

    文章目录 grafana安装启动如何导入需要的dashboard prometheus安装集成grafanaExportermysqld exporter安装配置 node exporterredis exporter grafana 安装

  • 地址栏中输入IP地址提示指定的网络名不再可用的解决方法

    在日常工作中 xff0c 我们有的时候为了省去在网上邻居查找相关资料的麻烦 xff0c 一般都直接在地址栏中输入远程地址 xff0c 如192 168 1 100 F xff0c 可有的时候偏偏输入地址后却提示 指定的网络名不再可用 的问题

  • ubuntu18.04添加用户

    文章目录 前言一 创建用户目录二 修改用户权限 前言 笔记 在远程服务的时候经常遇到用户登入冲突的情况 xff0c 在此做了总结 一 创建用户目录 span class token comment 创建deepstream user spa

  • 详细介绍如何在ROS 中使用自定义 msg 消息

    首先我们对Ros中的msg 消息做以简单的回顾 xff1a msg 消息是 ROS topic 通讯时 xff0c 节点之间进行传递的内容 msg 消息描述的是业务之间传递数据 xff0c 也可以理解为业务之间数据的抽象化 常见 Msg 消

  • linux下的信号量操作示例

    include lt sys types h gt include lt sys ipc h gt include lt sys sem h gt include lt pthread h gt include lt errno h gt

  • 用户行为分析的指标及其意义

    什么是用户行为 xff1f 用户行为由最简单的五个元素构成 xff0c 我们可以简单地记为3W2H xff1a 时间 xff08 When xff09 地点 xff08 Where xff09 人物 xff08 Who xff09 交互 x

  • 二层漫游和三层漫游（转载）

    漫游域 根据STA是否在同一个子网内漫游 xff0c 可以将漫游分为二层漫游和三层漫游 不同子网之间的漫游是三层漫游 xff08 同一个VLAN pool内的漫游仍然属于二层漫游 xff09 网络中有时候会出现以下情况 xff1a 两个子网

  • HTML DOM 事件

    1 HTML DOM 事件 参考文档 xff1a https www runoob com jsref dom obj event html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序 事件通常与

热门标签