无涯教程-Javascript - 标准事件

100 阅读4分钟

什么是事件?

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>

运行上面代码输出

_

HTML5 标准事件

_

此处列出了标准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

脚本

当媒体停止播放但有望恢复播放时触发

参考链接

www.learnfk.com/javascript/…