JS Events

Introduction

• JavaScript’s interaction with HTML is handled through various events that usually occur when the user or the browser manipulates a web page.

Definition

• An event is an activity associated with certain manipulation occurring with a web page.

Features

• Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.
• Some common HTML5 events are associated with a mouse button, pressing any keyboard button, closing a window, resizing the window, etc.

Examples

• Some typical HTML5 events are –
  • onClick() : It occurs when a user clicks the mouse’s left button once.
  • onSubmit() : It occurs when a user tries to submit a form/web page. 
  • onMouseover() and onMouseout() : The mouseover event occurs when a user brings the mouse over any element of the page and the mouse-out event occurs when a user moves his mouse out from that element.
  • offline() : It occurs when the document goes into offline mode.
  • onabort() : It occurs when an abort event/operation is performed.
  • onafterprint() :  It occurs after the document is printed.
  • onbeforeonload() : It occurs before the document loads.
  • onbeforeprint() : It occurs before the document is printed.
  • onblur() : It occurs when the window/controls lose focus.
  • oncanplay() : It occurs when media can start to play, but might have to stop for buffering.
  • oncanplaythrough() : It occurs when media can be played to the end, without stopping for buffering.
  • onchange() : It occurs when an element changes its state.
  • oncontextmenu() : It occurs when a context menu is triggered.
  • ondblclick() : It occurs when a mouse double-click operation is done.
  • ondrag() : It triggers when an element is dragged.
  • ondragend() : It triggers at the end of a drag operation.
  • ondragenter() : It triggers when an element has been dragged to a valid drop target.
  • ondragleave() : It triggers when an element leaves a valid drop target.
  • ondragover() : It triggers when an element is being dragged over a valid drop target.
  • ondragstart() : It triggers at the start of a drag operation.
  • ondrop() : It triggers when the dragged element is being dropped.
  • ondurationchange() : It occurs when the length of the media is changed.
  • onemptied() : It occurs when a media resource element suddenly becomes empty.
  • onended() : It occurs when media has reached the end.
  • onerror() : It occurs when an error occurs.
  • onfocus() : It occurs when the window/interface controls get focused.
  • onformchange() : It occurs when a form changes.
  • onforminput() : It occurs when a form gets user input.
  • onhaschange() : It occurs when the document has changed.
  • oninput() : It occurs when an element gets user input.
  • oninvalid() : It occurs when an element is invalid.
  • onkeydown() :It occurs when a key is pressed.
  • onkeypress() : It occurs when a key is pressed and released.
  • onkeyup() : It occurs when a key is released.
  • onload() : It occurs when the document loads.
  • onloadeddata() : It occurs when media data is loaded.
  • onmessage() : It occurs when the message is triggered.
  • onmousedown() : It occurs when a mouse button is pressed.
  • onmousemove() : It occurs when the mouse pointer moves.
  • onmouseup() : It occurs when a mouse button is released.
  • onmousewheel() : It occurs when the mouse wheel is rotated.
  • onoffline() : It occurs when the document goes offline.
  • ononline() : It occurs when the document comes online.
  • onpagehide() :It occurs when the window page is hidden.
  • onpageshow() : It occurs when the window page becomes visible.
  • onpause() : It occurs when media data is paused.
  • onplay() : It occurs when media data is going to start playing.
  • onplaying() : It occurs when media data has started playing.
  • onpopstate() : It happens when the window’s history changes.
  • onprogress() : It appears when the browser is fetching the media data.
  • onredo() : It occurs when the document performs a redo operation.
  • onresize() : It occurs when the window is resized.
  • onscroll() : It appears when an element’s scrollbar is being scrolled.
  • onselect() : It occurs when a part is selected.
  • onstorage() : It happens when a document loads.
  • onunload() : It occurs when the user leaves the document.