JavaScript - 事件

什么是事件？

JavaScript 与 HTML 的交互是通过用户或浏览器操作页面时发生的事件来处理的。

当页面加载时，它被称为事件。当用户单击按钮时，该单击也是一个事件。其他示例包括按下任意键、关闭窗口、调整窗口大小等事件。

开发人员可以使用这些事件来执行 JavaScript 编码的响应，从而导致按钮关闭窗口、向用户显示消息、验证数据以及几乎任何其他可以想象的类型的响应。

事件是文档对象模型 (DOM) 第 3 级的一部分，每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

请阅读这个小教程以更好地理解HTML 事件参考。在这里，我们将通过一些示例来了解事件和 JavaScript 之间的关系 -

onclick 事件类型

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

例子

尝试以下示例。

现场演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </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 并且查找已开始时触发
选定	脚本	选择元素时触发
已安装	脚本	当获取媒体数据出错时触发
存储上	脚本	文档加载时触发
提交	脚本	提交表单时触发
暂停	脚本	当浏览器已获取媒体数据，但在获取整个媒体文件之前停止时触发
准时更新	脚本	当媒体改变播放位置时触发
奥南多	脚本	当文档执行撤消时触发
卸载时	脚本	当用户离开文档时触发
音量变化时	脚本	当媒体改变音量时以及音量设置为“静音”时触发
等待中	脚本	当媒体已停止播放但预计会恢复时触发