ES6 事件

JavaScript旨在为您的页面添加交互性。JavaScript使用一种使用事件的机制来完成此操作事件是文档对象模型（DOM）Level 3的一部分，每个HTML元素都包含一组可触发JavaScript代码的事件。

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

事件处理程序

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

onsubmit事件类型

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和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	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	当浏览器开始加载媒体数据时触发
onmessage	script	触发消息时触发
onmousedown	script	当按下鼠标按钮时触发
onmousemove	script	当鼠标指针移动时触发
onmouseout	script	当鼠标指针移出元素时触发
onmouseover	script	当鼠标指针移到元素上时触发
onmouseup	script	当鼠标按钮被释放时触发
onmousewheel	script	鼠标滚轮旋转时触发
onoffline	script	当文档脱机时需要更新
ononline	script	文档联机时触发
onpagehide	script	窗口隐藏时触发
onpageshow	script	当窗口变得可见时触发
onpause	script	媒体数据暂停时触发
onplay	script	媒体数据开始播放时触发
onplaying	script	媒体数据开始播放时触发
onpopstate	script	当窗口的历史更改时触发
onprogress	script	当浏览器获取媒体数据时触发
onratechange	script	当媒体数据的播放速率发生变化时触发
onreadystatechange	script	当就绪状态改变时触发
onredo	script	当文档执行重做时触发
onresize	script	窗口大小调整时触发
onscroll	script	触发元素的滚动条滚动时
onseeked	script	当媒体元素的seek属性不再成立并且搜索结束时触发
onseeking	script	当媒体元素的seek属性为true并且搜索已经开始时触发
onselect	script	当选择一个元素时触发
onstalled	script	在获取媒体数据时发生错误时触发
onstorage	script	文档加载时触发
onsubmit	script	提交表单时触发
onsuspend	script	在浏览器获取媒体数据时触发，但在获取整个媒体文件之前停止
ontimeupdate	script	当媒体改变其播放位置时触发
onundo	script	当文档执行撤消时触发
onunload	script	当用户离开文档时触发
onvolumechange	script	在介质更改音量时触发，也在音量设置为“静音”时触发
onwaiting	script	当媒体停止播放时触发，但预计会恢复

下一章：ES6 Cookies

Web浏览器和服务器使用HTTP协议进行通信。HTTP是无状态协议，即它不会维护客户端的多个请求中的客户端数据。客户端和服务器之间的这个完整的请求 - 响应循环被定义为一个会话。Cookie是浏览器用来存储与用户会话 ...

上一章：ES6 函数

下一章：ES6 Cookies