学习ES6(七)--事件

事件是文档对象模型(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类型

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>

鼠标悬停和鼠标移出

这两种事件类型将帮助您用图像甚至文本创建漂亮的效果。

<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函数。

 

属性描述
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在浏览器开始加载媒体数据时触发
消息script触发消息时触发
鼠标停下script按下鼠标按钮时触发
情绪激动script鼠标指针移动时触发
暂停script当鼠标指针移出元素时触发
鼠标悬停script当鼠标指针移到某个元素上时触发
鼠标悬停script释放鼠标按钮时触发
鼠标轮script旋转鼠标滚轮时触发
离线script在文档离线时触发
在线上script在文档联机时触发
页面隐藏script窗口隐藏时触发
页面显示script窗口可见时触发
暂停script媒体数据暂停时触发
进行中script在媒体数据开始播放时触发
正在播放script在媒体数据开始播放时触发
流行状态script窗口的历史记录更改时触发
进行中script在浏览器获取媒体数据时触发
利率变化script媒体数据的播放速度改变时触发
就绪状态变更script当就绪状态更改时触发
Onredoscript在文档执行重做时触发
调整大小script调整窗口大小时触发
onscrollscript滚动元素的滚动条时触发
onseekingscript当媒体元素的搜索属性不再为真且搜索结束时触发
onselectscript在媒体元素的搜索属性为true且搜索已开始时触发
onstalledscript在选择元素时触发
onstalledscript在获取媒体数据时出错时触发
onselectscript加载文档时触发
onsubmitscript提交表单时触发
onsuspendscript在浏览器已获取媒体数据但在获取整个媒体文件之前停止时触发
ontimeupdatescript媒体改变播放位置时触发
onundoscript在文档执行撤消时触发
onunloadscript在用户离开文档时触发
onvolumechangescript当媒体更改音量时触发,也将音量设置为“静音”时触发
onwaitingscript在媒体停止播放但有望恢复播放时触发
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值