Event (Event) in JavaScript

What is the event?

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

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

Programmers can use these events to execute JavaScript-encoded responses, such as buttons to close windows, display messages to users, etc.

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

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

Onclick event type

This is the type of event used most often when a user clicks the left mouse button. You can set your confirmation, warning, . 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 = "Xin chao!" />

Result

Follow the above function to see the result.

The onsubmit event type

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

For example

The following example shows how to use onsubmit. Here, we call a validate () function before submitting a form data to the Webserver. If the validate () function returns true, 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" />

Type of onmouseover and onmouseout events

These two types of events will help you create beautiful effects with images or even text. The onmouseover event activates when you move your mouse over any element and the onmouseout activates when you move the mouse away from the 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 above function to see the result.

Standard HTML5 event

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

PropertiesValue DescriptionOffline script Activates when the document is offline Onabort script Activates on an event that aborts onafterprint script Activates after the document is printed onbeforeonload script Activated before the document loads onbeforeprint script Activates before the document printed onblur script Enable when the oncanplay script disabled window Activates when media can start playing, but must stop buffering the oncanplaythrough script Activate when media can be played to the end, without stopping to buffer onchange script Activation when an element changes the onclick script Activate on a click oncontextmenu script Enable when context menu is disabled ondblclick script Enable when double-clicking ondrag script Activates when an element is dragged ondragend script Activated at section end of The drag ondragenter script activates when an element has been dragged to a valid drop target ondragleave script Activated when an element is being dragged through a valid drop target ondragover script Activated at the beginning of the drag operation ondragstart script Activate at the beginning of the ondrop script drag operation Activate when the dragged element is being dropped ondurationchange script Activate when the media length is changed onemptied script Activate when the media source element suddenly becomes blank onended script Enable when media reaches the last onerror script Enable when an error occurs onfocus script Enable when the onformchange script receive window activates when a form changes onforminput script Activation when a form receives input from onhaschange user Script Script Active when the document changes the oninput script Enable when an element receives input from the user oninvalid script Activates when an invalid onkeydown script activates when a key is pressed onkeypress script Activates when a key is hit Click and release the onkeyup script Activate when a release key onload script Activates when the document loads onloadeddata script Activates when media data is loaded onloadedmetadata script Activates when the time and other data of a media element are download onloadstart script Enable when the browser starts downloading media data onmessage script Enable when the notification is enabled onmousedown script Enable when a mouse button is released onmousemove script Activated when the mouse pointer moves onmouseout script Activated when Mouse pointer moves exit an Activated onmouseover script element when the mouse pointer moves over an onmouseup script element Activated when a mouse button is released onmousewheel script Activated when the mouse wheel is turned onoffline script Activated when the document is offline onoine script Enable when the ononline script documentation is activated when the online document onpagehide script Activates when the hidden onpageshow script window Activates when the window becomes visible onpause script Activates 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 Activate when the change window onprogress script history Activates when the browser is receiving media data onratechange script Activate when playing speed of media has changed onreadystatechange script Activate when the ready state changes onredo script Activates when the document performs a redo onresize script Activates when the onscroll script is resized. Activate when the element's scrollbar is is triggered onseeked script Activated when the seeking element of a media element is no longer true, and seeking has ended the activation onseeking script when the seeking attribute of a media element is true, and seeking has begun to enable activation script when a selected onstalled script activates when there is an error during the reception of media data onstorage script Activates when a document downloads onsubmit script Activates when a form is submitted onsuspend script Activates when the browser is already in progress receive media data, but stopped p When the entire media file is received ontimeupdate script Enable when media changes its play onundo script Enable when a document executes an undo onunload script Activated when the user leaves the document onvolumechange script Enable When media changes volume, even when the media is set to mute onwaiting script Activate when the media has stopped playing but is expected to recover.

According to Tutorialspoint

Last lesson: JavaScript function

Next article: Page navigation (Redirect) in JavaScript

Lesley Montoya

Update 25 May 2019

You should read it

May be interested

Summary of JavaScript exercises with sample code
in order to make your javascript learning easier, tipsmake.com has compiled a number of javascript exercises with sample solutions for you to practice.
JavaScript location in HTML File
there is flexibility in providing javascript code anywhere in an html document. however, the most preferred ways to include javascript in an html file.
How to Turn on JavaScript
javascript is a language used in many websites to provide additional functionality and access to the user. developers use javascript to deliver a large part of their site's functionality to you, the user. your browser must have javascript...
What is the difference between Java and JavaScript?
although the names of java and javascript seem to be related (javascript seems to be a script in java?), but that's the only similarity. these two languages are not technically related to each other.
Void keywords in JavaScript
void is an important keyword in javascript that can be used as a unary operator before its single operand, which can be in any type. this operator defines an expression to be evaluated without returning a value.
JavaScript code to generate error charts & graphs
the example below illustrates a sample variance chart created with javascript that incorporates a column chart. you will also get the source code for reference and editing as you wish.
Introduction to 2D Array - 2-dimensional array in JavaScript
in the following article, we will introduce and show you some basic operations to create and access 2-dimensional arrays - 2d array in javascript. essentially, a 2-dimensional array is a concept of a matrix of matrices - a matrix, used to store information. each 1 element contains 2 separate indexes: row (y) - column and column (x) - column.
Operator in JavaScript
we see the following simple expression: 4 + 5 is equal to 9. here 4 and 5 are operands and '+' called operator - operator.
How to Disable JavaScript
this wikihow teaches you how to turn off your web browser's javascript support. javascript is responsible for loading dynamic content in webpages, so turning it off can help websites load faster than usual. most web browsers and their...
Browser compatibility in JavaScript
it is extremely important to understand the differences between different web browsers to handle each one in the best way. therefore, you must know which browser your website is running from so that it can provide a suitable solution.