ES6 -Events

JavaScript旨在为您的网页添加互动性. JavaScript使用使用事件的机制来完成此操作. 事件是文档对象模型(DOM)级别3的一部分,每个HTML元素都包含一组可以触发JavaScript代码的事件.

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

事件处理程序

在事件发生时,应用程序执行一组相关任务.实现此目的的代码块称为 eventhandler .每个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>

成功执行上述代码后会显示以下输出.

onsubmitEvent Type

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 and 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脚本文档离线时触发
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当媒体元素的搜索属性不再为真,并且搜索已经结束时触发
onseekingscript当媒体元素的搜索属性为true且搜索已开始时触发
onselectscript选择元素时触发
onstalledscript在获取媒体数据时出现错误
onstoragescript文档加载时触发
onsubmitscript提交表单时触发
onsuspendscript当浏览器被触发时触发获取媒体数据,但在获取整个媒体文件之前停止
ontimeupdatescript媒体更改播放时触发位置
onundoscript文档执行撤消时触发
onunloadscript用户离开文档时触发
onvolumechangescript当媒体更改音量时触发,当音量设置为"静音"时触发
onwaitingscript当媒体停止播放时触发,但预计会恢复