📅  最后修改于: 2020-10-25 10:32:41             🧑  作者: Mango
JavaScript旨在为页面添加交互性。 JavaScript通过使用事件的机制来做到这一点。事件是文档对象模型(DOM)级别3的一部分,每个HTML元素都包含一组可以触发JavaScript代码的事件。
事件是软件识别的动作或事件。它可以由用户或系统触发。事件的一些常见示例包括用户单击按钮,加载网页,单击超链接等。以下是一些常见的HTML事件。
在事件发生时,应用程序将执行一组相关任务。实现此目的的代码块称为eventhandler 。每个HTML元素都有一组与之关联的事件。我们可以使用事件处理程序定义如何在JavaScript中处理事件。
这是用户单击鼠标左键时最常使用的事件类型。您可以针对此事件类型进行验证,警告等。
Click the following button and see result
成功执行上述代码后,将显示以下输出。
onsubmit是您尝试提交表单时发生的事件。您可以针对此事件类型进行表单验证。
以下示例显示如何使用onsubmit 。在这里,我们在将表单数据提交到Web服务器之前调用validate()函数。如果validate()函数返回true,则将提交表单,否则将不提交数据。
这两种事件类型将帮助您使用图像甚至文本创建漂亮的效果。该onmouseover事件触发,当你把你的鼠标在任何元素和触发鼠标移开时,你出去从元素移动鼠标。
Bring your mouse inside the division to see the result:
This is inside the division
成功执行上述代码后,将显示以下输出。
下表列出了标准HTML 5事件,供您参考。该脚本指示针对该事件要执行的JavaScript函数。
Attribute | Value | Description |
---|---|---|
offline | script | Triggers when the document goes offline |
onabort | script | Triggers on an abort event |
onafterprint | script | Triggers after the document is printed |
onbeforeonload | script | Triggers before the document load |
onbeforeprint | script | Triggers before the document is printed |
onblur | script | Triggers when the window loses focus |
oncanplay | script | Triggers when the media can start play, but might have to stop for buffering |
oncanplaythrough | script | Triggers when the media can be played to the end, without stopping for buffering |
onchange | script | Triggers when an element changes |
onclick | script | Triggers on a mouse click |
oncontextmenu | script | Triggers when a context menu is triggered |
ondblclick | script | Triggers on a mouse double-click |
ondrag | script | Triggers when an element is dragged |
ondragend | script | Triggers at the end of a drag operation |
ondragenter | script | Triggers when an element has been dragged to a valid drop target |
ondragleave | script | Triggers when an element leaves a valid drop target |
ondragover | script | Triggers when an element is being dragged over a valid drop target |
ondragstart | script | Triggers at the start of a drag operation |
ondrop | script | Triggers when the dragged element is being dropped |
ondurationchange | script | Triggers when the length of the media is changed |
onemptied | script | Triggers when a media resource element suddenly becomes empty |
onended | script | Triggers when the media has reached the end |
onerror | script | Triggers when an error occurs |
onfocus | script | Triggers when the window gets focus |
onformchange | script | Triggers when a form changes |
onforminput | script | Triggers when a form gets user input |
onhaschange | script | Triggers when the document has changed |
oninput | script | Triggers when an element gets user input |
oninvalid | script | Triggers when an element is invalid |
onkeydown | script | Triggers when a key is pressed |
onkeypress | script | Triggers when a key is pressed and released |
onkeyup | script | Triggers when a key is released |
onload | script | Triggers when the document loads |
onloadeddata | script | Triggers when media data is loaded |
onloadedmetadata | script | Triggers when the duration and other media data of a media element is loaded |
onloadstart | script | Triggers when the browser starts to load the media data |
onmessage | script | Triggers when the message is triggered |
onmousedown | script | Triggers when a mouse button is pressed |
onmousemove | script | Triggers when the mouse pointer moves |
onmouseout | script | Triggers when the mouse pointer moves out of an element |
onmouseover | script | Triggers when the mouse pointer moves over an element |
onmouseup | script | Triggers when a mouse button is released |
onmousewheel | script | Triggers when the mouse wheel is being rotated |
onoffline | script | Triggers when the document goes offline |
ononline | script | Triggers when the document comes online |
onpagehide | script | Triggers when the window is hidden |
onpageshow | script | Triggers when the window becomes visible |
onpause | script | Triggers when the media data is paused |
onplay | script | Triggers when the media data is going to start playing |
onplaying | script | Triggers when the media data has start playing |
onpopstate | script | Triggers when the window’s history changes |
onprogress | script | Triggers when the browser is fetching the media data |
onratechange | script | Triggers when the media data’s playing rate has changed |
onreadystatechange | script | Triggers when the ready-state changes |
onredo | script | Triggers when the document performs a redo |
onresize | script | Triggers when the window is resized |
onscroll | script | Triggers when an element’s scrollbar is being scrolled |
onseeked | script | Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended |
onseeking | script | Triggers when a media element’s seeking attribute is true, and the seeking has begun |
onselect | script | Triggers when an element is selected |
onstalled | script | Triggers when there is an error in fetching media data |
onstorage | script | Triggers when a document loads |
onsubmit | script | Triggers when a form is submitted |
onsuspend | script | Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched |
ontimeupdate | script | Triggers when the media changes its playing position |
onundo | script | Triggers when a document performs an undo |
onunload | script | Triggers when the user leaves the document |
onvolumechange | script | Triggers when the media changes the volume, also when the volume is set to “mute” |
onwaiting | script | Triggers when the media has stopped playing, but is expected to resume |