学习笔记：javascript body常用事件

最新推荐文章于 2023-01-08 00:58:37 发布
最新推荐文章于 2023-01-08 00:58:37 发布
阅读量2.7k 收藏 2
点赞数
分类专栏： JavaScript WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MI__7019/article/details/76169295
版权
Window 事件属性

针对 window 对象触发的事件（应用到 <body> 标签）：

属性值描述
onafterprintscript文档打印之后运行的脚本。
onbeforeprintscript文档打印之前运行的脚本。
onbeforeunloadscript文档卸载之前运行的脚本。
onerrorscript在错误发生时运行的脚本。
onhaschangescript当文档已改变时运行的脚本。
onloadscript页面结束加载之后触发。
onmessagescript在消息被触发时运行的脚本。
onofflinescript当文档离线时运行的脚本。
ononlinescript当文档上线时运行的脚本。
onpagehidescript当窗口隐藏时运行的脚本。
onpageshowscript当窗口成为可见时运行的脚本。
onpopstatescript当窗口历史记录改变时运行的脚本。
onredoscript当文档执行撤销（redo）时运行的脚本。
onresizescript当浏览器窗口被调整大小时触发。
onstoragescript在 Web Storage 区域更新后运行的脚本。
onundoscript在文档执行 undo 时运行的脚本。
onunloadscript一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

属性值描述
onblurscript元素失去焦点时运行的脚本。
onchangescript在元素值被改变时运行的脚本。
oncontextmenuscript当上下文菜单被触发时运行的脚本。
onfocusscript当元素获得焦点时运行的脚本。
onformchangescript在表单改变时运行的脚本。
onforminputscript当表单获得用户输入时运行的脚本。
oninputscript当元素获得用户输入时运行的脚本。
oninvalidscript当元素无效时运行的脚本。
onresetscript当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselectscript在元素中文本被选中后触发。
onsubmitscript在提交表单时触发。

Keyboard 事件

属性值描述
onkeydownscript在用户按下按键时触发。
onkeypressscript在用户敲击按钮时触发。
onkeyupscript当用户释放按键时触发。

Mouse 事件

由鼠标或类似用户动作触发的事件：

属性值描述
onclickscript元素上发生鼠标点击时触发。
ondblclickscript元素上发生鼠标双击时触发。
ondragscript元素被拖动时运行的脚本。
ondragendscript在拖动操作末端运行的脚本。
ondragenterscript当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleavescript当元素离开有效拖放目标时运行的脚本。
ondragoverscript当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstartscript在拖动操作开端运行的脚本。
ondropscript当被拖元素正在被拖放时运行的脚本。
onmousedownscript当元素上按下鼠标按钮时触发。
onmousemovescript当鼠标指针移动到元素上时触发。
onmouseoutscript当鼠标指针移出元素时触发。
onmouseoverscript当鼠标指针移动到元素上时触发。
onmouseupscript当在元素上释放鼠标按钮时触发。
onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。
onscrollscript当元素滚动条被滚动时运行的脚本。
Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

属性值描述
onabortscript在退出时运行的脚本。
oncanplayscript当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchangescript当媒介长度改变时运行的脚本。
onemptiedscript当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onendedscript当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerrorscript当在文件加载期间发生错误时运行的脚本。
onloadeddatascript当媒介数据已加载时运行的脚本。
onloadedmetadatascript当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstartscript在文件开始加载且未实际加载任何数据前运行的脚本。
onpausescript当媒介被用户或程序暂停时运行的脚本。
onplayscript当媒介已就绪可以开始播放时运行的脚本。
onplayingscript当媒介已开始播放时运行的脚本。
onprogressscript当浏览器正在获取媒介数据时运行的脚本。
onratechangescript每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechangescript每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseekedscript当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseekingscript当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalledscript在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspendscript在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdatescript当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechangescript每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaitingscript当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
小熊一乐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象（JavaScript语言对象。如Math，Array）、宿主对象（浏览器对象） 3. “M”:Model,值得是Model，某种事物的表现形式 二、节点 1. 元素节点 ：<body> <p> <ul>等 2. 文本节点：<p>文本节点</p>、<li>文本节点</li>等 3. 属性节点：title id class 等 三、获取元素 三种方法：通过
JavaScript学习笔记之DOM基础操作实例小结
12-08
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html <body> <ulid> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6</ul> <!--文本节点adsasda--> <!--<span>元素节点 qeqweq</span>--> </body> javascript [removed] [removed]=function(){ varoUl=doc
javascript权威指南 学习笔记之javascript数据类型
01-21
代码如下: <!doctype html> <html> <head> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <title>javascript数据类型</title> </head> <body> [removed] /** JavaScript中允许使用 三种基本数据类型－－－－数字，文本字符和布尔值。其中数字包括符点数. 此外，它还支持两种小数据类型－－－null(空)和undefined(未定义)，该两种小数据类型，它们各自只定义了一个值 。 还
Javascript 学习笔记 错误处理
12-03
Java代码 代码如下: <html> <head> <title>javascript</title> [removed] function test(inVal){ try{ inVal=inVal.toUpperCase(); }catch(error){ alert(“An exception has occurred.Error was:\n\n”+error.message); } } [removed] </head> <body> <input type=”button” value=”Test” onclick=”test(nul
HTML5参考手册大全7本合集.chm
11-11
HTML5参考手册大全7本合集.chm
【html5】html学习笔记1
weixin_30847939的博客
08-02 138
html5语法规则 1.标签要小写 2.省略标签 如 <tr> <td> <tr><td> 3.属性不加” 如 <div id=div1> 4.单标签不加结束标签 如 <img src=""> 5.废除标签fontcenterbig等 6 html5文档声明<!DOCTYPEHTML...
Swing之文本比较
YW博客
05-25 177
package com.swing; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.FileInputStream; import java.io.FileNotFoundException; import javax.swing.*; public class SwingFC implements ActionLi.
javascript中unonload和onload事件分析
Shaniya
05-22 2907
unonload事件是在关闭窗口时触发的事件，要跟onblur区分开，onblur是在窗口失去焦点时触的事件 案例1：页面关闭时打开一个新页面，unonload事件在关闭页面和刷新页面时都会执行，因此要判断页面是关闭还是刷新 New Document function openwin(){    window.open("","","height=200,width=400
window常见事件（包含定时器及案例）
weixin_48340600的博客
09-23 3264
window常见事件 1、window.onload() 窗口加载事件 有了它，我们就可以在页面的任何位置的script标签写js代码 因为onload是等页面全部内容加载完毕之后，再去执行函数内的代码，使用时我们用事件包含起来就行了 window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener
JavaScript 学习笔记（十五）
12-11
（从里面的div触发事件再到body，到html最后直到document最顶端）。 2、捕获型事件 可以说跟冒泡是正好相反的，事件从最不精确的对象开始触发，然后直到最精确。 3、DOM事件流 DOM同时支持以上两种事件模型，其中...
form 内 onclick事件_小有成就，深入了解下JavaScript事件模型
weixin_29229055的博客
02-03 743
开篇寄语：有些人看起来整天面带笑容，并不是因为他们事事顺利，只是他们比你敢于面对问题、善于遗忘不幸、勇于拥抱欣喜。人最大的对手，往往不是别人，而是自己的懒惰。别指望撞大运，运气不可能永远在你身上，任何时候都要靠 本事吃饭。也许这每天的两句话不能改变你当下的情况，但至少被你看见过，就是最美好的事。从今天开始就要对JavaScript做进一步的学习了。一、JavaScript事件模型事件是 JavaS...
DOM(5)——body、document对象的事件，其他事件
qq_34573534的博客
08-16 401
1、body、document对象的事件 （1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。 （2）onu...
HTML 页面的生命周期、HTML 事件
freeking101的博客
06-09 2901
HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途 DOMContentLoaded： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是 和 样式表 等外部资源可能并没有下载完毕。 load ：浏览器已经加载了所有的资源（ 图像，样式表等 ）。可以在此事件触发时获得图像的大小（ 如果没有被在 HTML/CSS 中指定 ） beforeunload / unload ：当用户离开页面的时候触发。......
HTML|JavaScript学习笔记一之事件
News777的博客
07-22 540
一、HTML事件 1.1 Window 事件属性 注：针对 window 对象触发的事件（应用到<body>标签） 1.1.1 语法 <element 事件名="script"> 例：element为body（标签名），事件名为onafterprint（在页面设置打印及打印对话框出现后执行 JavaScript ），script为调用函数 <script> function printdoc() { alert("文档打印中"); } <body onaft
BOM(一)：window对象常见事件、定时器
weixin_53912712的博客
01-08 1290
window 对象的常见事件、定时器、location 对象、navigator 对象、history 对象
input()函数的简单介绍
热门推荐
ISPEAKER的博客
08-22 6万+
1.input()函数 在Python3中，input()函数接受一个标准输入数据，返回为string类型。 注意：在Python3中，raw_input()和input()进行了整合，去除了raw_input(),仅保留了input()函数，其接收任意任性输入。将所有输入默认为字符串处理，并返回字符串类型。 2.input()函数的使用 input()函数是输入函数，是实现人机交互...
Window事件大全
温故知新
03-31 2927
事件   名称 说明 公共事件 Activated 在窗口变成前台窗口时发生。 公共事件 Closed 在窗口即将关闭时发生。 公共事件 Closing 在调用 Close 之后立即发生，并且可进行处理以取消关闭窗口。 公共事件 ContentRendered 在呈现了窗口的内容之后发生。 公共事件 ContextMenuClosing 在元素上的任何上下文菜单关闭之前发生
HTML元素大全
weixin_33670713的博客
10-17 121
a 表示超链接的起始或目的位置。 acronym 表示取首字母的缩写词。 address 表示特定信息，如地址、签名、作者、文档信息。 applet 在页面上放置可执行内容。 area 定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。 b 指定文本应以粗体显示。 base 指定一个显式 URL 用于解析对于外部源的链...
gstreamer学习笔记：通过udp传输音视频
最新发布
06-11
好的，我会尽力回答你的问题。关于通过UDP传输音视频，我了解一些相关的知识，下面是一些学习笔记： 1. gstreamer是一个流媒体框架，用于创建、处理和播放多媒体流。它支持多种音视频格式，可以通过插件扩展功能。 2. 通过gstreamer可以使用UDP协议传输音视频数据。UDP协议是一种无连接的协议，不保证数据传输的可靠性和顺序性，但是传输效率高。 3. 首先需要创建一个gstreamer的pipeline，包括音视频源、编码器、UDP发送端等组件。例如： ``` gst-launch-1.0 -v filesrc location=test.mp4 ! decodebin ! x264enc ! rtph264pay ! udpsink host=192.168.1.100 port=5000 ``` 这个pipeline的作用是从test.mp4文件读取音视频流，解码后使用x264编码器进行压缩，然后使用rtph264pay将数据打包成RTP数据包，最后通过udpsink发送到指定的IP地址和端口。 4. 接收端需要创建一个gstreamer的pipeline，包括UDP接收端、解包器、解码器等组件。例如： ``` gst-launch-1.0 -v udpsrc port=5000 ! application/x-rtp, payload=96 ! rtpjitterbuffer ! rtph264depay ! avdec_h264 ! autovideosink ``` 这个pipeline的作用是从UDP端口5000接收音视频数据，使用rtpjitterbuffer解决网络抖动问题，使用rtph264depay将RTP数据包解包成原始的H.264数据流，然后使用avdec_h264解码器进行解码，最后使用autovideosink播放视频。 5. 在实际使用过程中，还需要考虑数据的带宽限制、网络延迟等问题，以保证音视频传输的效果。 希望这些笔记能对你有帮助。如果你还有其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值