📜  ES6事件

📅  最后修改于: 2021-01-01 04:09:02             🧑  作者: Mango

ES6活动

HTML的交互是通过浏览器或用户操纵页面时发生的事件来处理的。事件是软件识别的事件或动作。系统或用户可以触发它们。

可以将事件声明为DOM(文档对象模型)级别3的一部分。事件发生在网页上进行某种类型的交互时。每个HTML元素都包含可以触发JavaScript代码的事件集合。事件的一些常见示例包括单击按钮,单击超链接,加载网页等。

事件处理程序

要对事件做出反应,您可以分配一个处理程序(一个在事件发生时运行的函数)。可以将事件处理程序定义为在事件发生时执行的代码块。我们可以使用事件处理程序来定义JavaScript中事件的处理。

让我们尝试了解最常用的HTML事件。

事件类型

它是用户单击按钮时激活的最常用的事件类型之一。在这种事件类型中,我们可以发出警告,验证等。单击时, “ onclick”调用分配给它的相应函数()

让我们通过一个例子来理解它。

 
    
       
    
   
    
      

Click the button

在浏览器中执行上述代码时,将获得以下输出。

输出量

单击按钮后,您将收到警报,如下所示。

提交事件类型

当您需要提交表格时会发生这种情况。当您单击“提交”按钮时, “ onsubmit”将调用相应的“返回函数()” ,并从函数()中获取true或false的响应。如果函数()返回true,则将提交表单。否则,它将不会提交数据。

onmouseout和onmouseover

这些事件可帮助您使用文本和图像创建效果。顾名思义,将鼠标悬停在任何元素上时会触发onmouseover事件。将鼠标移出元素时,会触发onmouseout事件。

让我们尝试通过使用以下示例来理解它们。

   
 
     
 

 
      
    

Bring your mouse inside it.

Move your cursor on the above heading to see the result.

在浏览器中执行上述代码时,将获得以下输出。

输出量

将鼠标移到第一个标题上,您将获得:

将鼠标从第一个标题移出,您将获得:

HTML5标准事件

下表列出了一些常用的HTML事件。

Attributes Description
onabort It triggers on the abort event.
offline It gets trigger when the document goes offline.
onafterprint It triggers after the printing of the document.
onbeforeonload It triggers before the loading of the document.
onbeforeprint It triggers before the printing of the document.
onblur It triggers when the window loses the focus.
onchange It triggers when the element changes.
onclick It triggers when the mouse clicks.
oncontextmenu It triggers when the context menu gets triggered.
oncanplay It triggers when the media can start play.
oncanplaythrough It triggers when media plays till the end without any buffering or stopping.
ondbclick It triggers on the double-click of a mouse.
ondrag It triggers when the element is dragged.
ondrop It triggers when a dragged element is dropped.
ondragend It triggers when the drag operation gets end.
ondragenter It triggers when the element has dragged to drop target.
ondragleave It triggers when an element leaves a drop target.
ondragover It triggers when the element is being dragged over a drop target.
ondragstart It triggers at the starting of a drag operation.
ondurationchange It triggers when the media length is changed.
onended It triggers when the media reached the end.
omemptied It triggers when the resource element in media suddenly gets empty.
onfocus It triggers when the window gets focus.
onerror It triggers at the occurring of an error.
onformchange It triggers when the form gets change.
onforminput It triggers when the form gets input from the user.
onhaschange It triggers at the changing of a document.
oninput It triggers when the element gets input from the user.
oninvalid It triggers on an invalid element.
onkeyup It triggers when the key is released.
onkeydown It triggers when the key is pressed.
onkeypress It triggers when the key is released and pressed.
onload It triggers at the loading of the document.
onloadedmetadata It triggers when the media data and duration of the media element is loaded.
onloadeddata It triggers when the data of media is loaded.
onmessage It triggers at the triggering of the message.
onloadstart It triggers when the browser starts the loading of media data.
onmousemove It triggers at the moving of the mouse pointer.
onmousedown It triggers at the pressing of the mouse button.
onmouseover It triggers when you move the mouse pointer over an element.
onmouseout It triggers when the mouse pointer moves out from the element.
onmouseup It triggers at the release of a mouse button.
onmousewheel It triggers when you rotate the wheel of the mouse.
ononline It triggers when the document is online.
onoffline It triggers when the document is offline.
onpageshow It triggers when the window gets visible.
onpagehide It triggers when the window is hidden.
onplay It triggers when the media data is going to start playing.
onplaying It triggers when the media data is playing.
onpause It triggers when the media data is paused.
onprogress It triggers when the browser fetches the media data.
onpopstate It triggers when the history of window changes.
onratechange It triggers when the playing rate of media data is changed.
onreadystatechange It triggers when the ready-state changes.
onredo It triggers when there is a redo operation is performing by the document.
onresize It triggers when the window gets resized.
onscroll It triggers when the scrollbar of an element is being scrolled.
onseeking It triggers when the seeking attribute of media element is true, and the seeking has begun.
onseeked It triggers when the seeking attribute of media element is not true, and the seeking has ended.
onselect It triggers when the element gets selected.
onstalled It triggers when there is an error in the fetching of media data.
onsubmit It triggers when the form gets submitted.
onstorage It triggers when the document loads.
onvolumechange It triggers when the media element changes its volume or when the volume is on mute.
onwaiting It triggers when the media element has stopped playing, but it is expected to resume.
onunload It triggers when a user leaves the document.
onundo It triggers when the document performs the undo operation.
ontimeupdate It triggers when the playing position of media element changes.
onsuspend It triggers when the browser is fetching the media data but stopped before the complete media file was fetched.