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>

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

1.gif

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>

成功执行上述代码后,将显示以下输出:

1.gif

HTML 5标准事件

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

属性描述
offlinescript当文档脱机时触发
onabortscript在中止事件上触发
onafterprintscript在打印文档之后触发
onbeforeonloadscript在加载文档之前触发
onbeforeprintscript在打印文档之前触发
onblurscript当窗口失去焦点时触发
oncanplayscript当媒体可以开始播放但可能必须停止以进行缓冲时触发
oncanplaythroughscript当媒体可以播放到结束,而不停止进行缓冲时触发
onchangescript元素更改时触发
onclickscript单击鼠标时触发
oncontextmenuscript当上下文菜单被触发时触发
ondblclickscript鼠标双击时触发
ondragscript当拖动元素时触发
ondragendscript在拖动操作结束时触发
ondragenterscript将元素拖动到有效的放置目标时触发
ondragleavescript当元素离开有效的放置目标时触发
ondragoverscript在将元素拖动到有效的放置目标上时触发
ondragstartscript拖动操作开始时触发
ondropscript在删除拖动的元素时触发
ondurationchangescript更改媒体长度时触发
onemptiedscript当媒体资源元素突然变为空时触发
onendedscript媒体到达结尾时触发
onerrorscript发生错误时触发
onfocusscript当窗口获得焦点时触发
onformchangescript表单更改时触发
onforminputscript表单获取用户输入时触发
onhaschangescript文档更改时触发
oninputscript元素获取用户输入时触发
oninvalidscript元素无效时触发
onkeydownscript按键时触发
onkeypressscript按下并释放按键时触发
onkeyupscript释放密钥时触发
onloadscript加载文档时触发
onloadeddatascript加载媒体数据时触发
onloadedmetadatascript加载媒体元素的持续时间和其他媒体数据时触发
onloadstartscript浏览器开始加载媒体数据时触发
onmessagescript触发消息时触发
onmousedownscript按下鼠标按钮时触发
onmousemovescript鼠标指针移动时触发
onmouseoutscript当鼠标指针移出元素时触发
onmouseoverscript当鼠标指针移到元素上时触发
onmouseupscript释放鼠标按钮时触发
onmousewheelscript当鼠标滚轮旋转时触发
onofflinescript文档脱机时触发
ononlinescript文档联机时触发
onpagehidescript当窗口隐藏时触发
onpageshowscript当窗口可见时触发
onpausescript暂停媒体数据时触发
onplayscript媒体数据开始播放时触发
onplayingscript媒体数据开始播放时触发
onpopstatescript当窗口的历史记录更改时触发
onprogressscript当浏览器获取媒体数据时触发
onratechangescript当媒体数据的播放速率更改时触发
onreadystatechangescript当就绪状态更改时触发
onredoscript当文档执行重做时触发
onresizescript调整窗口大小时触发
onscrollscript在滚动元素的滚动条时触发
onseekedscript当媒体元素的Seeking属性不再为true且查找已结束时触发
onseekingscript当媒体元素的Seeking属性为true且查找已开始时触发
onselectscript选择元素时触发
onstalledscript获取媒体数据时出错时触发
onstoragescript文档加载时触发
onsubmitscript提交表单时触发
onsuspendscript当浏览器正在提取媒体数据,但在提取整个媒体文件之前停止时触发
ontimeupdatescript当媒体改变播放位置时触发
onundoscript当文档执行撤消操作时触发
onunloadscript当用户离开文档时触发
onvolumechangescript当媒体更改音量时触发,也当音量设置为“静音”时触发。
onwaitingscript当媒体停止播放,但预期将恢复播放时触发