Events in JavaScript
IT Tricks

Events in JavaScript


What is an event?

JavaScript interaction with HMTL is handled through events that occur when a user or browser manipulates a page.

When a page loads, it is called an event. When the user clicks a button, that click is also an event. Examples of other events such as pressing a key, closing a window, increasing or decreasing a window, etc.

Programmers can use these events to execute JavaScript-coded responses, such as buttons to close windows, messages displayed to the user, etc.

Events are part of the Document Object Model (DOM) Level 3 and each HTML element contains a collection of events that can trigger JavaScript Code.

Hope you visit our little tutorial to understand later Summary of events (Events) in HTML. Here, we will see some examples to understand the relationship between Events and JavaScript.

Type of onclick event

This type of event is most often used when a user clicks the left mouse button. You can set your assertions, alerts, etc. for this type of event.

For example

Try the following example:

   type="text/javascript">     

Click the following button and see result

type="button" onclick="sayHello()" value="Hello!" />

Result

Follow the function above to see results.

The onsubmit event type

onsubmit is a type of event that occurs when you try to submit a form. You can set form validation for this type of event.

For example

The following example shows how to use onsubmit. Here, we call a function validate () before submitting a form data to the Webserver. If the function validate () If true returns, the form will be submitted, otherwise it will not submit data.

Try the following example:

   type="text/javascript">      method="POST" action="t.cgi" onsubmit="return  validate()">  .......  type="submit" value="Submit" />   

Types of onmouseover and onmouseout events

These two types of events will help you create beautiful effects with images or even with text. Event onmouseover fires when you mouse over any element and onmouseout fires when you move the mouse away from that element. Try the following example:

   type="text/javascript">     

Bring your mouse inside the division to see the result:

onmouseover="over()" onmouseout="out()">

This is inside the division

Result

Follow the function above to see results.

Standard HTML5 event

Standard HTML5 events are listed below. Here, the script instructs a JavaScript function to be executed for that event.

Properties Value Describe
Offline script Activate when document is offline
Onabort script Trigger on an aborted event
onafterprint script Activate after the document is printed
onbeforeonload script Activate before the document loads
onbeforeprint script Activate before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Activates when the media can start playing, but must stop for buffering
oncanplaythrough script Activates when the media can be played to the end, without stopping to buffer
onchange script Triggers when an element changes
onclick script Activate on a mouse click
oncontextmenu script Triggers when the context menu is activated
ondblclick script Activate on double click
ondrag script Triggers when an element is dragged
ondragend script Activate at the end of the drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element is being dragged over a valid drop target
ondragover script Activate at the beginning of the drag operation
ondragstart script Activate at the beginning of the drag operation
ondrop script Triggers when the dragged element is being released
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when the media source element suddenly becomes blank
onended script Activate when the media reaches the end
onerror script Triggers when an error occurs
onfocus script Triggers when the window receives focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form receives input from a user
onhaschange script Activate when document changes
oninput script Triggers when an element receives input from a user
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 is released
onkeyup script Triggers when a key is released
onload script Activate when document loads
onloadeddata script Activate when media data is loaded
onloadedmetadata script Triggers when the time and other data of a media element are loaded
onloadstart script Activate when the browser starts to download media data
onmessage script Activate when notification is triggered
onmousedown script Triggers when a mouse button is released
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 Activate when the mouse wheel is turned
onoffline script Activate when document is offline
onoine script Activate when the document is online
ononline script Activate when the document is online
onpagehide script Activate when the window is hidden
onpageshow script Activate when the window becomes visible
onpause script Triggered when media data is stopped
onplay script Activate when media data is about to start playing
onplaying script Activate when media data is starting to play
onpopstate script Triggers when the window history changes
onprogress script Activate when the browser is receiving media data
onratechange script Activate when the media play speed has changed
onreadystatechange script Activate when the status is ready to change
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when the scroll bar of the element is being scrolled
onseeked script Triggers when the seeking attribute of a media element is no longer true, and seeking has ended
onseeking script Activates when the seeking attribute of a media element is true, and seeking begins
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error during media data acquisition
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggered when the browser was receiving media data, but stopped before the entire media file was retrieved
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 Activates when the media changes the volume, even when the media is set to mute
onwaiting script Activates when the media has stopped playing but is expected to recover.

Follow Tutorialspoint

Previous lesson: Functions in JavaScript

Next article: Page navigation (Redirect) in JavaScript

.