- 0133技术站
- 联系QQ:18840023
- QQ交流群
- 微信公众号
ES 6 事件
JavaScript旨在为页面添加交互性。JavaScript使用一种使用事件的机制来实现这一点。事件是文档对象模型(DOM)级别3的一部分,每个HTML元素都包含一组可以触发JavaScript代码的事件。
事件是软件识别的动作或事件。它可以由用户或系统触发。一些常见的事件示例包括用户单击按钮、加载web页面、单击超链接等等。下面是一些常见的HTML事件。
事件处理程序
在事件发生时,应用程序执行一组相关任务。实现此目的的代码块称为eventhandler。每个HTML元素都有一组与其关联的事件。我们可以定义如何使用事件处理程序在JavaScript中处理事件。
onclick事件类型
这是最常用的事件类型,当用户单击鼠标左键时发生。您可以针对此事件类型设置验证、警告等。
例
<html> <head> <meta charset="UTF-8"> <script type = "text/javascript"> function sayHello() { document.write ("Hello World") } </script> </head> <body> <p> 单击以下按钮,查看结果</p> <input type = "button" onclick = "sayHello()" value = "打个招呼" /> </body> </html>
成功执行上述代码后,将显示以下输出。
onsubmit事件类型
onsubmit是尝试提交表单时发生的事件。您可以将表单验证针对此事件类型。
下面的示例展示了如何使用onsubmit。在向web服务器提交表单数据之前,我们调用validate()函数。如果validate()函数返回true,表单将被提交,否则它将不提交数据。
例
<html> <head> <meta charset="UTF-8"> <script type = "text/javascript"> function validation() { all validation goes here ......... return either true or false } </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> ....... <input type = "submit" value = "Submit" /> </form> </body> </html>
onmouseover和onmouseout
这两种事件类型将帮助您对图像甚至文本创建良好的效果。当您将鼠标移到任何元素上时,onmouseover事件将触发,当您将鼠标移出该元素时,onmouseout将触发。
例
<html> <head> <meta charset="UTF-8"> <script type = "text/javascript"> function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } </script> </head> <body> <p>把你的滑鼠带进分区,看看结果:</p> <div onmouseover = "over()" onmouseout = "out()"> <h2> 这是在部门内部 </h2> </div> </body> </html>
成功执行上述代码后,将显示以下输出:
HTML 5标准事件
下表列出了标准HTML 5事件,供您参考。该脚本指示针对该事件执行的JavaScript函数。
属性 | 值 | 描述 |
---|---|---|
offline | script | 当文档脱机时触发 |
onabort | script | 在中止事件上触发 |
onafterprint | script | 在打印文档之后触发 |
onbeforeonload | script | 在加载文档之前触发 |
onbeforeprint | script | 在打印文档之前触发 |
onblur | script | 当窗口失去焦点时触发 |
oncanplay | script | 当媒体可以开始播放但可能必须停止以进行缓冲时触发 |
oncanplaythrough | script | 当媒体可以播放到结束,而不停止进行缓冲时触发 |
onchange | script | 元素更改时触发 |
onclick | script | 单击鼠标时触发 |
oncontextmenu | script | 当上下文菜单被触发时触发 |
ondblclick | script | 鼠标双击时触发 |
ondrag | script | 当拖动元素时触发 |
ondragend | script | 在拖动操作结束时触发 |
ondragenter | script | 将元素拖动到有效的放置目标时触发 |
ondragleave | script | 当元素离开有效的放置目标时触发 |
ondragover | script | 在将元素拖动到有效的放置目标上时触发 |
ondragstart | script | 拖动操作开始时触发 |
ondrop | script | 在删除拖动的元素时触发 |
ondurationchange | script | 更改媒体长度时触发 |
onemptied | script | 当媒体资源元素突然变为空时触发 |
onended | script | 媒体到达结尾时触发 |
onerror | script | 发生错误时触发 |
onfocus | script | 当窗口获得焦点时触发 |
onformchange | script | 表单更改时触发 |
onforminput | script | 表单获取用户输入时触发 |
onhaschange | script | 文档更改时触发 |
oninput | script | 元素获取用户输入时触发 |
oninvalid | script | 元素无效时触发 |
onkeydown | script | 按键时触发 |
onkeypress | script | 按下并释放按键时触发 |
onkeyup | script | 释放密钥时触发 |
onload | script | 加载文档时触发 |
onloadeddata | script | 加载媒体数据时触发 |
onloadedmetadata | script | 加载媒体元素的持续时间和其他媒体数据时触发 |
onloadstart | script | 浏览器开始加载媒体数据时触发 |
onmessage | script | 触发消息时触发 |
onmousedown | script | 按下鼠标按钮时触发 |
onmousemove | script | 鼠标指针移动时触发 |
onmouseout | script | 当鼠标指针移出元素时触发 |
onmouseover | script | 当鼠标指针移到元素上时触发 |
onmouseup | script | 释放鼠标按钮时触发 |
onmousewheel | script | 当鼠标滚轮旋转时触发 |
onoffline | script | 文档脱机时触发 |
ononline | script | 文档联机时触发 |
onpagehide | script | 当窗口隐藏时触发 |
onpageshow | script | 当窗口可见时触发 |
onpause | script | 暂停媒体数据时触发 |
onplay | script | 媒体数据开始播放时触发 |
onplaying | script | 媒体数据开始播放时触发 |
onpopstate | script | 当窗口的历史记录更改时触发 |
onprogress | script | 当浏览器获取媒体数据时触发 |
onratechange | script | 当媒体数据的播放速率更改时触发 |
onreadystatechange | script | 当就绪状态更改时触发 |
onredo | script | 当文档执行重做时触发 |
onresize | script | 调整窗口大小时触发 |
onscroll | script | 在滚动元素的滚动条时触发 |
onseeked | script | 当媒体元素的Seeking属性不再为true且查找已结束时触发 |
onseeking | script | 当媒体元素的Seeking属性为true且查找已开始时触发 |
onselect | script | 选择元素时触发 |
onstalled | script | 获取媒体数据时出错时触发 |
onstorage | script | 文档加载时触发 |
onsubmit | script | 提交表单时触发 |
onsuspend | script | 当浏览器正在提取媒体数据,但在提取整个媒体文件之前停止时触发 |
ontimeupdate | script | 当媒体改变播放位置时触发 |
onundo | script | 当文档执行撤消操作时触发 |
onunload | script | 当用户离开文档时触发 |
onvolumechange | script | 当媒体更改音量时触发,也当音量设置为“静音”时触发。 |
onwaiting | script | 当媒体停止播放,但预期将恢复播放时触发 |
推荐手册