Skip to content
Related Articles

Related Articles

HTML Event Attributes Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Mar, 2022

Events are actions that happen in the browser when the user does something For example when users click on the mouse or type something on the keyboard.

Event Attributes: In HTML, we can use event actions on the browser, and with the help of event, the user responds to the system. Event Attributes can be used with HTML elements to perform various actions.

List of Event Attributes: The complete list of Event Attributes are given below:

1. Window Event Attributes

  • onafterprint: The onafterprint attribute works when a page has started printing, or if the print dialogue box has been closed. This attribute is used together with the onbeforeprint attribute.
  • onbeforeprint: The onbeforeprint attribute works when a page is about to be printed. The alert message display before the print dialogue box appears. The onbeforeprint attribute is used with the onafterprint attribute.
  • onbeforeunload: The onbeforeunload event run when the document is about to be unloaded. This event is used to allow to display a message in a dialog box to inform the user, so he/she wants to stay or leave the current page.
  • onerror: This attribute works when an error occurs while loading an external file. The external file may contain a document file or an image file.
  • onhashchange: This attribute works when there have been changes to the anchor part. The anchor part starts with ‘#’ symbol of the current URL.
  • onload: This attribute works when an object has been loaded. This attribute mostly used within the <body> element to execute a script. It can be used with other elements as well. This attribute is used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.
  • onmessage: This event is used when an object has received some message through an event source.
  • onoffline: The onoffline event attribute works when the browser works in offline mode. It is supported by <body> tag only. It is the opposite of ononline event attribute.
  • ononline: The ononline event attribute works when the browser starts working in online mode. It is opposite to onoffline event attribute.
  • onpagehide: This event occurs when the user is getting off from the webpage. For example, close the browser window, click on the link, refresh the page, etc.
  • onpageshow: This event occurs when a user navigates to a website. This event is quite similar to onload event, but it occurs after the onload event. It occurs every time when the page is loaded whereas the onload event does not occur when the page is loaded from the cache.
  • onresize: The onresize event attribute is triggered each time when resizing the browser window size.
  • onunload: The onunload event attribute works when the document is being unloaded i.e. it occurs when the browser has been closed. It is mostly used when the user opens a link and submit the form and close the browser window.

2. Form Event Attributes

  • onblur: This attribute fires at that moment when the element loses focus. This attribute is mostly used in the form validation code. This attribute is the opposite of onfocus attribute.
  • onchange: The onchange event attribute works when the value of the element changes and select the new value from the List.
  • oncontextmenu: This attribute works when the user right-clicks on an element to open the context menu.
  • onfocus: This onfocus attribute works when the element gets focused. This event attribute is mostly used with <input>, <select>, <a> elements. This event attribute is supported by all HTML elements excepts <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> elements.
  • oninput: This attribute works when it gets user input value. This attribute mainly fires when the user change the value of <input> and <textarea> element.
  • oninvalid: The oninvalid event attribute works when an input field values are invalid or empty. The script run when a user clicks on the submit button. The required input field must be filled before submitting it.
  • onreset: The onreset event attribute in HTML is triggered when reset the form. This Attribute works with <form> tag.
  • onsearch: This onsearch attribute works when a user presses the ENTER button or click on the x button. This event works with <input> element.
  • onselect: The onselect event attribute works when some text has been selected in an element. It is the part of event attribute. It is supported by many HTML elements such as <input type = “file”>, <input type = “password”>, <input type = “text”>, and <textarea>.
  • onsubmit: The onsubmit event attribute in HTML is triggered when a form is submitted.

3. Keyboard Event Attributes

  • onkeydown: This onkeydown event attribute works when user presses any key from the keyboard.
  • onkeyup: This onkeyup event attribute works when the user releases the key from the keyboard.
  • onkeypress: This attribute fires when a user presses a key on the Keyboard. This event attribute can not be used for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers.

4. Mouse Events

  • onclick: The onclick event attribute works when the user clicks on the button. When mouse clicked on the element then the script run.
  • onmouseout: The onmouseout attribute works when the mouse pointer moves out of the specified element.
  • ondblclick: This Attribute Event occurs when a user fires mouse Double click on the Element. It is a part of Event Attribute.
  • onmouseover: The onmouseover event attribute works when the mouse pointer moves over the specified element.
  • onmousedown: This onmousedown attribute will fire when a mouse button is pressed down on the element and the order of events occur related to the onmousedown event(for the left/mouse button)
  • onmouseup: This attribute fires when a mouse button is released over the element. The order of events occurs related to the onmouseup event.
  • onmousemove: The onmousemove attribute works when the pointer moves over an element.
  • onwheel: This attribute works when the wheel of pointer device is rolled up or down over an element. The onwheel attribute also works when the user scrolls or zooms on an element by using mouse or touchpad.

5. Drag Event Attributes

  • ondrag: The ondrag event attribute works when the element or text selection is being dragged in HTML. This event is very similar to drag and drop event. This attribute is new in HTML 5.
  • ondragstart: It is used when the user wants to drag the text or element. It is simply the process in which we press on the desired text to drag and drop them to a different location.
  • ondragend: The ondragend event attribute works when the user finished the dragging of element. The drag and drop feature is common in HTML5. Any element can make draggable by using the HTML5 draggable attribute.
  • ondrop: The ondrop event attribute is used to drag an element or text and drop it into a valid droppable location or target. The drag and drop is the common feature of HTML 5.
  • ondragenter: The ondragenter event attribute in HTML works when the content is draggable. An element is made by setting the draggable attribute value to true. The draggable attribute can take only true or false value.
  • onscroll: This onscroll attribute works when an element scrollbar is being scrolled. To create a scrollbar in an element, use the CSS overflow property.
  • ondragleave: The ondragleave attribute works when a draggable element or text selection leaves a valid drop target. It helps in dragging the elements and is entering or leaving a drop target.
  • ondragover: This event occurs when a draggable element is being dragged over a valid dropzone.

6. Clipboard Event Attributes

  • oncopy: This attribute fires when the user copied the content present in an element. The oncopy attribute is used with <img>, <input>, <p> etc elements.
  • onpaste: The onpaste attribute works when some contents are paste in an element. This event attribute is supported by all HTML elements. It is mostly used with <input> element.
  • oncut: This attribute fires when the user cut or delete the content that has been present in the element. It is a Boolean type attribute. This attribute is supported by all HTML elements, but it is possible for that element which has a ContentEditable attribute set to “true”.

7. Media Event Attributes

  • onabort: This occurs in abortion of an audio/video loading when the downloading of media data is aborted without any error.
  • oncanplay: It occurs when a specified audio/video is buffered enough to begin.
  • oncanplaythrough: It is used when the media i.e. audio/video can play till the end without any buffering.
  • onemptied: It occurs when the event is empty.
  • onended: It occurs when audio/video completes.
  • ondurationchange: It occurs when the audio/video duration is changed.
  • onerror: It is triggered when interruption occurs while loading an external file.
  • onloadeddata: It occurs when the current frame data is loaded but the next frame’s data is not enough data to play the audio/video.
  • onloadedmetadata: It occurs when metadata is loaded for the specified audio/video.
  • onloadstart: It occurs when the loading process of a specified audio/video starts.
  • onpause: It occurs when the audio/video is paused. The audio/video can be paused either by the user or programmatically.
  • onplayevent: It occurs when the audio/video is played. The audio/video can be played either by the user or programmatically.
  • onplaying: It occurs when the audio/video is paused and playing after the buffer.
  • onprogress: It occurs when the browser is downloading the specified audio/video.
  • onratechange: It occurs if the playing speed of the audio/video is changed. The playbackRate property is used to sets or returns the current playback speed of an audio/video.

8. Misc Event Attributes

  • ontoggle: The ontoggle event is triggered when the user open or close the <details> element. The <details> element is used to provide additional information/details that user can view or hide details according to requirement.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!