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。这里，我们在向网络服务器提交表单数据之前调用 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 函数。

属性	价值	描述
离线	脚本	文档离线时触发
中止	脚本	触发中止事件
印后	脚本	文档打印后触发
加载前	脚本	文档加载前触发
预印本上	脚本	在打印文档之前触发
模糊	脚本	当窗口失去焦点时触发
可以播放	脚本	当媒体可以开始播放但可能必须停止进行缓冲时触发
可以通关	脚本	当媒体可以播放到结尾而无需停止缓冲时触发
变化	脚本	当元素改变时触发
单击时	脚本	单击鼠标时触发
上下文菜单	脚本	触发上下文菜单时触发
双击	脚本	鼠标双击触发
翁德拉格	脚本	拖动元素时触发
翁德拉根德	脚本	拖动操作结束时触发
翁德拉根特	脚本	当元素被拖动到有效的放置目标时触发
拖拽离开	脚本	当元素离开有效的放置目标时触发
翁德拉戈弗	脚本	当元素被拖动到有效的放置目标上时触发
拖拽开始	脚本	在拖动操作开始时触发
上落	脚本	当拖动的元素被放下时触发
持续时间变化	脚本	当媒体长度改变时触发
未清空	脚本	当媒体资源元素突然变空时触发
已结束的	脚本	当媒体到达末尾时触发
错误	脚本	发生错误时触发
焦点	脚本	当窗口获得焦点时触发
变更	脚本	表单更改时触发
信息输入	脚本	当表单获取用户输入时触发
奥哈斯变化	脚本	当文档更改时触发
输入时	脚本	当元素获取用户输入时触发
无效	脚本	当元素无效时触发
按下按键	脚本	按下某个键时触发
按键	脚本	按下并释放某个键时触发
按键启动	脚本	释放按键时触发
负载	脚本	文档加载时触发
加载的数据	脚本	加载媒体数据时触发
加载的元数据	脚本	加载媒体元素的持续时间和其他媒体数据时触发
加载启动	脚本	当浏览器开始加载媒体数据时触发
留言	脚本	消息触发时触发
鼠标按下时	脚本	按下鼠标按钮时触发
鼠标移动时	脚本	当鼠标指针移动时触发
鼠标移出时	脚本	当鼠标指针移出元素时触发
鼠标悬停时	脚本	当鼠标指针移动到元素上时触发
鼠标悬停时	脚本	释放鼠标按钮时触发
鼠标滚轮上	脚本	鼠标滚轮旋转时触发
线上线下	脚本	文档离线时触发
在线	脚本	文档上线时触发
页面隐藏	脚本	窗口隐藏时触发
页面显示	脚本	当窗口变得可见时触发
暂停	脚本	媒体数据暂停时触发
进行中	脚本	当媒体数据要开始播放时触发
正在播放	脚本	当媒体数据开始播放时触发
流行状态	脚本	当窗口的历史记录更改时触发
进行中	脚本	当浏览器获取媒体数据时触发
利率变化	脚本	当媒体数据的播放速率发生变化时触发
就绪状态改变	脚本	当就绪状态改变时触发
翁雷多	脚本	当文档执行重做时触发
调整大小	脚本	调整窗口大小时触发
滚动	脚本	当元素的滚动条滚动时触发
追寻的	脚本	当媒体元素的查找属性不再为 true 并且查找已结束时触发
追寻	脚本	当媒体元素的查找属性为 true 并且查找已开始时触发
选定	脚本	选择元素时触发
已安装	脚本	当获取媒体数据出错时触发
存储上	脚本	文档加载时触发
提交	脚本	提交表单时触发
暂停	脚本	当浏览器已获取媒体数据，但在获取整个媒体文件之前停止时触发
准时更新	脚本	当媒体改变播放位置时触发
奥南多	脚本	当文档执行撤消时触发
卸载时	脚本	当用户离开文档时触发
音量变化时	脚本	当媒体改变音量时以及音量设置为“静音”时触发
等待中	脚本	当媒体已停止播放但预计会恢复时触发