{"id":20090,"date":"2022-10-06T03:49:50","date_gmt":"2022-10-06T03:49:50","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9253"},"modified":"2022-10-06T03:49:50","modified_gmt":"2022-10-06T03:49:50","slug":"global-event-attributes","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/global-event-attributes\/","title":{"rendered":"Global Event Attributes"},"content":{"rendered":"\n

An event occurs when the browser reacts to a particular action of the user. The user generates an event when clicking on a mouse, playing video, uploading a document or an image, or performing other actions on a website.<\/p>\n\n\n\n

To react to an event, a handler is assigned to it. A handler is a way to run script (e.g., JavaScript) in case of user actions. There are many ways of attaching a handler, and one of them is setting it in HTML with attributes.<\/p>\n\n\n\n

Below, you can find a table of event attributes used to initiate specific actions.<\/p>\n\n\n\n

Window Events Attributes<\/h2>\n\n\n\n

Window events are triggered for the window object. The attributes are applicable only to the\u00a0<body>\u00a0tag.<\/p>\n\n\n\n

Attribute<\/th>Description<\/th><\/tr><\/thead>
onafterprint<\/td>Executed when the document is printed.
New attribute in HTML5.<\/strong><\/td><\/tr>
onbeforeprint<\/td>Executed before the document is printed.
New attribute in HTML5.<\/strong><\/td><\/tr>
onbeforeunload<\/td>Executed when the document is about to get unloaded (when a user is about to quit the page before it is loaded).
New attribute in HTML5.<\/strong><\/td><\/tr>
onblur<\/td>Executed when a window loses focus.<\/td><\/tr>
onerror<\/td>Executed when an error occurs when downloading the document.
New attribute in HTML5.<\/strong><\/td><\/tr>
onhashchange<\/td>Executed when the anchor in URL of a web page is changed (anchor comes after #).
New attribute in HTML5.<\/strong><\/td><\/tr>
onload<\/td>Executed when content of a web page (images,\u00a0CSS styles\u00a0and scripts) is entirely loaded.<\/td><\/tr>
onmessage<\/td>Executed when a message is triggered.
New attribute in HTML5.<\/strong><\/td><\/tr>
onoffline<\/td>Executed when the browser works offline.
New attribute in HTML5.<\/strong><\/td><\/tr>
ononline<\/td>Executed when the browser works online.
New attribute in HTML5.<\/strong><\/td><\/tr>
onpagehide<\/td>Executed when a user go away from the web page.
New attribute in HTML5.<\/strong><\/td><\/tr>
onpageshow<\/td>Executed when a user navigates to a web page.
New attribute in HTML5.<\/strong><\/td><\/tr>
onpopstate<\/td>Executed when the window’s history is changed.
New attribute in HTML5.<\/strong><\/td><\/tr>
onredo<\/td>Executed when a \u201cRedo\u201d option is used ( the last action is reversed).
New attribute in HTML5.<\/strong><\/td><\/tr>
onresize<\/td>Executed when a window is resized.
New attribute in HTML5.<\/strong><\/td><\/tr>
onstorage<\/td>Executed when a web storage is updated.
New attribute in HTML5.<\/strong><\/td><\/tr>
onundo<\/td>Executed when the last action is cancelled (\u201cundo\u201d command).
New attribute in HTML5.<\/strong><\/td><\/tr>
onunload<\/td>Executed when a web page is unloaded (closed).
New attribute in HTML5.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Form Events Attributes<\/h2>\n\n\n\n

An event that can occur within a form is called a form event. Form events happen when a user opens or closes a form, moves between forms, or works with data on a form.<\/p>\n\n\n\n

Form events attributes can be applied to all HTML elements, but they are generally used with HTML forms elements.<\/p>\n\n\n\n

Attribute<\/th>Description<\/th><\/tr><\/thead>
onblur<\/td>Executed when a form element loses focus.<\/td><\/tr>
onchange<\/td>Executed when the value of the element is changed.<\/td><\/tr>
oncontextmenu<\/td>Executed when the context menu is shown.
New attribute in HTML5.<\/strong><\/td><\/tr>
onfocus<\/td>Executed when an element gets focus.<\/td><\/tr>
oninput<\/td>Executed when an element gets user input.
New attribute in HTML5.<\/strong><\/td><\/tr>
oninvalid<\/td>Executed if an input element is invalid.
New attribute in HTML5.<\/strong><\/td><\/tr>
onreset<\/td>Executed when a form is reset (all controls within the form are set to their initial values).
New attribute in HTML5.<\/strong><\/td><\/tr>
onsearch<\/td>Executed when the user writes something in a search field (for <input=”search”>).<\/td><\/tr>
onselect<\/td>Executed when some text is selected in an element.<\/td><\/tr>
onsubmit<\/td>Executed when a form is sent.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Keyboard Events Attributes<\/h2>\n\n\n\n

The keyboard event attributes can be applied to all HTML elements.<\/p>\n\n\n\n

Attribute<\/th>Description<\/th><\/tr><\/thead>
onkeydown<\/td>Executed when the user is pressing any key on the keyboard.<\/td><\/tr>
onkeypress<\/td>Executed when the user has pressed a key on the keyboard. (doesn\u2019t work with Alt, Ctrl, Shift, Esc, PrScr).<\/td><\/tr>
onkeyup<\/td>Executed when a pressed key is released.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Mouse Event Attributes<\/h2>\n\n\n\n

Mouse events occur when the mouse interacts with the HTML document. The attributes can be applied to all HTML elements.<\/p>\n\n\n\n

Attribute<\/th>Description<\/th><\/tr><\/thead>
onclick<\/td>Executed when a mouse-button is clicked.<\/td><\/tr>
ondblclick<\/td>Executed when a mouse-button is clicked twice.<\/td><\/tr>
ondrag<\/td>Executed when an element is being dragged.
New attribute in HTML5.<\/strong><\/td><\/tr>
ondragend<\/td>Executed when an element has been dragged.
New attribute in HTML5.<\/strong><\/td><\/tr>
ondragenter<\/td>Executed when a dragged element enters a valid drop target.
New attribute in HTML5.<\/strong><\/td><\/tr>
ondragleave<\/td>Executed when a dragged element leaves a valid drop target.
New attribute in HTML5.<\/strong><\/td><\/tr>
ondragover<\/td>Executed when a dragged element being dragged over a valid drops target (every few hundred milliseconds).
New attribute in HTML5.<\/strong><\/td><\/tr>
ondragstart<\/td>Executed when the user starts dragging an element.
New attribute in HTML5.<\/strong><\/td><\/tr>
ondrop<\/td>Executed when the user drops dragging an element.
New attribute in HTML5.<\/strong><\/td><\/tr>
onmousedown<\/td>Executed when a mouse button is pressed.<\/td><\/tr>
onmousemove<\/td>Executed when the mouse pointer is moved onto the element.<\/td><\/tr>
onmouseout<\/td>Executed when the mouse pointer moves out of an element.<\/td><\/tr>
onmouseover<\/td>Executed when the mouse pointer is moved onto an element.<\/td><\/tr>
onmouseup<\/td>Executed when a mouse button is released.<\/td><\/tr>
onmousewheel<\/td>Executed when the mouse wheel rolls up or down over an element.
Obsolete attribute (use onwheel attribute instead).<\/strong><\/td><\/tr>
onscroll<\/td>Executed when an element’s scrollbar is being scrolled.
New attribute in HTML5.<\/strong><\/td><\/tr>
onwheel<\/td>Executed when the mouse wheel rolls up or down over an element.
New attribute in HTML5.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Clipboard Event Attributes<\/h2>\n\n\n\n
Attribute<\/th>Description<\/th><\/tr><\/thead>
oncopy<\/td>Executed when the content of an element is copied.<\/td><\/tr>
oncut<\/td>Executed when the content of an element is cut.<\/td><\/tr>
onpaste<\/td>Executed when the content of an element is pasted.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Media-files Events Attributes<\/h2>\n\n\n\n

Media-files events occur in media elements, like video, image, audio. The attributes can be applied to any HTML element, but they are generally used within\u00a0audio,\u00a0embed,\u00a0img,\u00a0object\u00a0and\u00a0video\u00a0elements.<\/p>\n\n\n\n

Attribute<\/th>Description<\/th><\/tr><\/thead>
onabort<\/td>Executed when the loading of an audio\/video is aborted.
New attribute in HTML5.<\/strong><\/td><\/tr>
oncanplay<\/td>Executed when the file is ready to start playing (has buffered enough to start playing).
New attribute in HTML5.<\/strong><\/td><\/tr>
oncanplaythrough<\/td>Executed when the file is ready to be played from start to end without stopping for buffering.
New attribute in HTML5.<\/strong><\/td><\/tr>
oncuechange<\/td>Executed when the duration of the media is changed.
New attribute in HTML5.<\/strong><\/td><\/tr>
onemptied<\/td>Executed when something happens and the file is unavailable (e.g., when the Internet connection is lost).
New attribute in HTML5.<\/strong><\/td><\/tr>
onended<\/td>Executed when a media file reached the end.
New attribute in HTML5.<\/strong><\/td><\/tr>
onerror<\/td>Executed when an error occurs when the file is being loaded.
New attribute in HTML5.<\/strong><\/td><\/tr>
onloadeddata<\/td>Executed when media data is loaded.
New attribute in HTML5.<\/strong><\/td><\/tr>
onloadedmetadata<\/td>Executed when metadata (size of media files, duration, etc. ) is loaded.
New attribute in HTML5.<\/strong><\/td><\/tr>
onloadstart<\/td>Executed when the browser starts downloading media data.
New attribute in HTML5.<\/strong><\/td><\/tr>
onpause<\/td>Executed when the mediafile is paused.
New attribute in HTML5.<\/strong><\/td><\/tr>
onplay<\/td>Executed when the file is ready to start playing.
New attribute in HTML5.<\/strong><\/td><\/tr>
onplaying<\/td>Executed when the file starts playing.
New attribute in HTML5.<\/strong><\/td><\/tr>
onprogress<\/td>Executed when the browser is in process of getting media data.
New attribute in HTML5.<\/strong><\/td><\/tr>
onratechange<\/td>Executed each time, when the playing mode is changed (e.g. user switches fast forward or slow motion mode).
New attribute in HTML5.<\/strong><\/td><\/tr>
onseeked<\/td>Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking has ended.
New attribute in HTML5.<\/strong><\/td><\/tr>
onseeking<\/td>Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking is active.
New attribute in HTML5.<\/strong><\/td><\/tr>
onstalled<\/td>Executed when the browser cannot get media data for whatever reason.
New attribute in HTML5.<\/strong><\/td><\/tr>
onsuspend<\/td>Executed when the browser has already started extracting media data, but the process was suspended before the data is completely loaded.
New attribute in HTML5.<\/strong><\/td><\/tr>
ontimeupdate<\/td>Executed when the playing position is changed.
New attribute in HTML5.<\/strong><\/td><\/tr>
onvolumechange<\/td>Executed each time when the volume is changed (includes setting the volume to “mute”).
New attribute in HTML5.<\/strong><\/td><\/tr>
onwaiting<\/td>Executed when media file is suspended, but is about to resume (e.g., when the file is paused for buffering).
New attribute in HTML5.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Other Events Attributes<\/h2>\n\n\n\n
Attribute<\/th>Description<\/th><\/tr><\/thead>
onerror<\/td>Executed when an error occurs when downloading external file.<\/td><\/tr>
onshow<\/td>Executed when the\u00a0<menu>\u00a0is shown as a context menu.
New attribute in HTML5.<\/strong><\/td><\/tr>
ontoggle<\/td>Executed when a user opens or closes the\u00a0<details>.
New attribute in HTML5.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

An event occurs when the browser reacts to a particular action of the user. The user generates an event when clicking on a mouse, playing video, uploading a document or an image, or performing other actions on a website. To react to an event, a handler is assigned to it. A handler is a way […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[529],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/20090"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=20090"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/20090\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=20090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=20090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=20090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}