ES6 - 事件

JavaScript 的目的是为您的页面添加交互性。JavaScript 使用事件机制来实现这一点。事件是文档对象模型 (DOM) 3 级的一部分，每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

事件是软件识别的一个动作或事件。它可以由用户或系统触发。一些常见的事件示例包括用户单击按钮、加载网页、单击超链接等。以下是一些常见的 HTML 事件。

事件处理程序

事件发生时，应用程序会执行一组相关的任务。实现此目的的代码块称为事件处理程序。每个 HTML 元素都有一组与其关联的事件。我们可以使用事件处理程序在 JavaScript 中定义如何处理这些事件。

onclick 事件类型

这是最常用的事件类型，当用户单击鼠标左键时发生。您可以针对此事件类型设置验证、警告等。

示例

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

以上代码成功执行后显示以下输出。

onsubmit 事件类型

onsubmit 事件是在您尝试提交表单时发生的事件。您可以针对此事件类型设置表单验证。

以下示例显示了如何使用onsubmit。在这里，我们在向 Web 服务器提交表单数据之前调用 validate() 函数。如果 validate() 函数返回 true，则提交表单；否则，不提交数据。

示例

<html> 
   <head> 
      <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> 
      <script type = "text/javascript"> 
         function over() {  
            document.write ("Mouse Over");  
         }  
         function out() {  
            document.write ("Mouse Out");  
         }  
      </script> 
   </head> 

   <body> 
      <p>Bring your mouse inside the division to see the result:</p> 
      <div onmouseover = "over()" onmouseout = "out()"> 
         <h2> This is inside the division </h2> 
      </div> 
   </body> 
</html>

以上代码成功执行后显示以下输出。

HTML 5 标准事件

下表列出了标准 HTML 5 事件，供您参考。脚本表示要针对该事件执行的 JavaScript 函数。

属性	值	描述
offline	脚本	文档离线时触发
onabort	脚本	在中止事件中触发
onafterprint	脚本	文档打印后触发
onbeforeonload	脚本	文档加载前触发
onbeforeprint	脚本	文档打印前触发
onblur	脚本	窗口失去焦点时触发
oncanplay	脚本	媒体可以开始播放时触发，但可能需要停止缓冲
oncanplaythrough	脚本	媒体可以播放到结尾时触发，无需停止缓冲
onchange	脚本	元素更改时触发
onclick	脚本	鼠标单击时触发
oncontextmenu	脚本	触发上下文菜单时触发
ondblclick	脚本	鼠标双击时触发
ondrag	脚本	拖动元素时触发
ondragend	脚本	拖动操作结束时触发
ondragenter	脚本	将元素拖动到有效放置目标时触发
ondragleave	脚本	元素离开有效放置目标时触发
ondragover	脚本	将元素拖动到有效放置目标上时触发
ondragstart	脚本	拖动操作开始时触发
ondrop	脚本	拖动元素被放下时触发
ondurationchange	脚本	媒体长度更改时触发
onemptied	脚本	媒体资源元素突然变空时触发
onended	脚本	媒体到达结尾时触发
onerror	脚本	发生错误时触发
onfocus	脚本	窗口获得焦点时触发
onformchange	脚本	表单更改时触发
onforminput	脚本	表单获得用户输入时触发
onhaschange	脚本	文档更改时触发
oninput	脚本	元素获得用户输入时触发
oninvalid	脚本	元素无效时触发
onkeydown	脚本	按下键时触发
onkeypress	脚本	按下并释放键时触发
onkeyup	脚本	释放键时触发
onload	脚本	文档加载时触发
onloadeddata	脚本	加载媒体数据时触发
onloadedmetadata	脚本	加载媒体元素的持续时间和其他媒体数据时触发
onloadstart	脚本	浏览器开始加载媒体数据时触发
onmessage	脚本	触发消息时触发
onmousedown	脚本	按下鼠标按钮时触发
onmousemove	脚本	鼠标指针移动时触发
onmouseout	脚本	鼠标指针移出元素时触发
onmouseover	脚本	鼠标指针移到元素上时触发
onmouseup	脚本	释放鼠标按钮时触发
onmousewheel	脚本	旋转鼠标滚轮时触发
onoffline	脚本	文档离线时触发
ononline	脚本	文档上线时触发
onpagehide	脚本	窗口隐藏时触发
onpageshow	脚本	窗口可见时触发
onpause	脚本	暂停媒体数据时触发
onplay	脚本	媒体数据即将开始播放时触发
onplaying	脚本	媒体数据开始播放时触发
onpopstate	脚本	窗口历史记录更改时触发
onprogress	脚本	浏览器正在获取媒体数据时触发
onratechange	脚本	媒体数据的播放速率更改时触发
onreadystatechange	脚本	就绪状态更改时触发
onredo	脚本	文档执行重做操作时触发
onresize	脚本	窗口大小调整时触发
onscroll	脚本	滚动元素的滚动条时触发
onseeked	脚本	媒体元素的 seeking 属性不再为 true 且搜索已结束时触发
onseeking	脚本	媒体元素的 seeking 属性为 true 且搜索已开始时触发
onselect	脚本	选择元素时触发
onstalled	脚本	获取媒体数据时出错时触发
onstorage	脚本	文档加载时触发
onsubmit	脚本	提交表单时触发
onsuspend	脚本	浏览器一直在获取媒体数据，但在获取整个媒体文件之前停止时触发
ontimeupdate	脚本	媒体更改其播放位置时触发
onundo	脚本	文档执行撤消操作时触发
onunload	脚本	用户离开文档时触发
onvolumechange	脚本	媒体更改音量时触发，将音量设置为“静音”时也会触发
onwaiting	脚本	媒体已停止播放但预计会恢复播放时触发

打印页面