学习ES6（七）--事件

最新推荐文章于 2023-05-23 00:00:59 发布

等待星期八

最新推荐文章于 2023-05-23 00:00:59 发布

阅读量609

点赞数

分类专栏：前端相关文章标签： javascript es6/es7

本文链接：https://blog.csdn.net/qq_34975445/article/details/105394843

版权

前端相关专栏收录该内容

27 篇文章 0 订阅

订阅专栏

事件是文档对象模型（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函数。

属性	值	描述
offline	script	在文档离线时触发
onabort	script	触发中止事件
onafterprint	script	在文档打印后触发
onbeforeonload	script	在文档加载之前触发
onbeforeprint	script	在文档打印之前触发
onblur	script	当窗口失去焦点时触发
oncanplay	script	在媒体可以开始播放但可能需要停止以进行缓冲时触发
oncanplaythrough	script	触发媒体何时可以播放到最后而无需停止缓冲
onchange	script	元素更改时触发
onclick	script	单击鼠标触发
oncontextmenu	script	触发上下文菜单时触发
ondblclick	script	双击鼠标触发
ondrag	script	拖动元素时触发
ondragend	script	在拖动操作结束时触发
ondragenter	script	将元素拖动到有效放置目标时触发
ondragleave	script	当元素离开有效的放置目标时触发
ondragover	script	在将元素拖动到有效放置目标上时触发
ondragstart	script	在拖动操作开始时触发
ondrop	script	在拖放元素时触发
ondurationchange	script	更改媒体长度时触发
onemptied	script	媒体资源元素突然变空时触发
onended	script	媒体播放完毕时触发
onerror	script	发生错误时触发
onfocus	script	窗口聚焦时触发
onformchange	script	表单更改时触发
onforminput	script	在表单获取用户输入时触发
onhaschange	script	更改文档时触发
oninput	script	在元素获取用户输入时触发
oninvalid	script	元素无效时触发
onkeydown	script	按下按键时触发
onkeypress	script	按下并释放键时触发
onkeyup	script	释放按键时触发
onload	script	加载文档时触发
onloadeddata	script	加载媒体数据时触发
onloadedmetadata	script	加载媒体元素的持续时间和其他媒体数据时触发
onloadstart	script	在浏览器开始加载媒体数据时触发
消息	script	触发消息时触发
鼠标停下	script	按下鼠标按钮时触发
情绪激动	script	鼠标指针移动时触发
暂停	script	当鼠标指针移出元素时触发
鼠标悬停	script	当鼠标指针移到某个元素上时触发
鼠标悬停	script	释放鼠标按钮时触发
鼠标轮	script	旋转鼠标滚轮时触发
离线	script	在文档离线时触发
在线上	script	在文档联机时触发
页面隐藏	script	窗口隐藏时触发
页面显示	script	窗口可见时触发
暂停	script	媒体数据暂停时触发
进行中	script	在媒体数据开始播放时触发
正在播放	script	在媒体数据开始播放时触发
流行状态	script	窗口的历史记录更改时触发
进行中	script	在浏览器获取媒体数据时触发
利率变化	script	媒体数据的播放速度改变时触发
就绪状态变更	script	当就绪状态更改时触发
Onredo	script	在文档执行重做时触发
调整大小	script	调整窗口大小时触发
onscroll	script	滚动元素的滚动条时触发
onseeking	script	当媒体元素的搜索属性不再为真且搜索结束时触发
onselect	script	在媒体元素的搜索属性为true且搜索已开始时触发
onstalled	script	在选择元素时触发
onstalled	script	在获取媒体数据时出错时触发
onselect	script	加载文档时触发
onsubmit	script	提交表单时触发
onsuspend	script	在浏览器已获取媒体数据但在获取整个媒体文件之前停止时触发
ontimeupdate	script	媒体改变播放位置时触发
onundo	script	在文档执行撤消时触发
onunload	script	在用户离开文档时触发
onvolumechange	script	当媒体更改音量时触发，也将音量设置为“静音”时触发
onwaiting	script	在媒体停止播放但有望恢复播放时触发