Javascript标准事件

阿猫的高效成长课

产品面试题解析

居家减脂入门实操指南

什么是事件?

HTML 事件是发生在 HTML 元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

页面加载时称为事件，当用户单击按钮时，该单击也是一个事件，其他示例包括事件，如按任意键，关闭窗口，调整窗口大小等。

点击事件

onclick 这是用户单击鼠标左键时最常使用的事件类型，您可以针对此事件类型进行验证，警告等。

请尝试以下示例。

复制代码

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

运行上面代码输出

提交事件

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事件。请尝试以下示例。

复制代码

<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事件供您参考。这里的script指示针对该事件要执行的Javascript函数。

属性	值	说明
Offline	脚本	文档脱机时触发
Onabort	脚本	中止事件触发
onafterprint	脚本	打印文件后触发
onbeforeonload	脚本	在文档加载之前触发
onbeforeprint	脚本	在文档打印之前触发
onblur	脚本	当窗口失去焦点时触发
oncanplay	脚本	当媒体可以开始播放但可能需要停止缓冲才能触发
oncanplaythrough	脚本	触发何时可以播放完媒体而无需停止缓冲
onchange	脚本	元素更改时触发
onclick	脚本	点击鼠标触发
oncontextmenu	脚本	触发上下文菜单时触发
ondblclick	脚本	双击鼠标触发
ondrag	脚本	拖动元素时触发
ondragend	脚本	拖动操作结束时触发
ondragenter	脚本	将元素拖动到有效放置目标时触发
ondragleave	脚本	将元素拖动到有效放置目标上方时触发
ondragover	脚本	拖动操作开始时触发
ondragstart	脚本	拖动操作开始时触发
ondrop	脚本	在拖放拖动元素时触发
ondurationchange	脚本	更改媒体长度时触发
onemptied	脚本	当媒体资源元素突然变空时触发。
onended	脚本	当媒体用完时触发
onerror	脚本	发生错误时触发
onfocus	脚本	在窗口获得焦点时触发
onformchange	脚本	表单更改时触发
onforminput	脚本	当表单获得用户输入时触发
onhaschange	脚本	文档更改时触发
oninput	脚本	当元素获得用户输入时触发
oninvalid	脚本	当元素无效时触发
onkeydown	脚本	按下键时触发
onkeypress	脚本	按下和释放键时触发
onkeyup	脚本	释放键时触发
onload	脚本	在文档加载时触发
onloadeddata	脚本	在加载媒体数据时触发
onloadedmetadata	脚本	在加载媒体元素的持续时间和其他媒体数据时触发
onloadstart	脚本	在浏览器开始加载媒体数据时触发
onmessage	脚本	触发消息时触发
onmousedown	脚本	按下鼠标按钮时触发
onmousemove	脚本	鼠标指针移动时触发
onmouseout	脚本	当鼠标指针移出元素时触发
onmouseover	脚本	当鼠标指针移到某个元素上时触发
onmouseup	脚本	释放鼠标按钮时触发
onmousewheel	脚本	在旋转鼠标滚轮时触发
onoffline	脚本	文档脱机时触发
onoine	脚本	文档在线时触发
ononline	脚本	文档在线时触发
onpagehide	脚本	隐藏窗口时触发
onpageshow	脚本	在窗口可见时触发
onpause	脚本	在媒体数据暂停时触发
onplay	脚本	当媒体数据开始播放时触发
onplaying	脚本	媒体数据开始播放时触发
onpopstate	脚本	在窗口的历史记录更改时触发
onprogress	脚本	在浏览器获取媒体数据时触发
onratechange	脚本	当媒体数据的播放速度更改时触发
onreadystatechange	脚本	准备状态更改时触发
onredo	脚本	在文档执行重做时触发
onresize	脚本	调整窗口大小时触发
onscroll	脚本	在滚动元素的滚动条时触发
onseeked	脚本	当媒体元素的搜索属性不再为真且搜索结束时触发
onseeking	脚本	在媒体元素的搜索属性为true且搜索已开始时触发
onselect	脚本	在选择元素时触发
onstalled	脚本	在获取媒体数据时出现错误时触发
onstorage	脚本	文档加载时触发
onsubmit	脚本	提交表单时触发
onsuspend	脚本	在浏览器已获取媒体数据但在获取整个媒体文件之前已停止时触发
ontimeupdate	脚本	当媒体更改其播放位置时触发
onundo	脚本	在文档执行撤消操作时触发
onunload	脚本	用户离开文档时触发
onvolumechange	脚本	在媒体更改音量时触发,也在音量设置为"静音"时触发
onwaiting	脚本	当媒体停止播放但有望恢复播放时触发