HomeProgramJavaScriptEvent (Event) in JavaScript

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

5 ★ | 1 Vote

You should read it

May be interested

  • Page navigation (Redirect) in JavaScriptPhoto of Page navigation (Redirect) in JavaScript
    you may have a situation when you click on a url to go to page x but you are directed to page y. it happens because page redirection - redirects the page. this concept is different from: javascript - refresh page.
  • Dialogs - Alert, Prompt, Confirmation in JavaScriptPhoto of Dialogs - Alert, Prompt, Confirmation in JavaScript
    javascript supports 3 important dialog types. these dialogs can be used to notify, confirm input, or receive input from users. below we discuss each type of dialog box.
  • Void keywords in JavaScriptPhoto of 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.
  • Print pages in JavaScriptPhoto of Print pages in JavaScript
    many times you will love to put a button on your website to print the content of that page through a printer. javascript helps you perform this function by using the print function of the window object.
  • Objects in JavaScriptPhoto of Objects in JavaScript
    javascript is an object oriented programming language (object oriented programming). a program language can be called object-oriented if it provides four basic capabilities to the programmer.
  • Tutorial for creating slideshows in JavaScript with 3 easy stepsPhoto of Tutorial for creating slideshows in JavaScript with 3 easy steps
    if you are studying or interested in programming, do not skip the article below to guide how to create slideshows in java script with 3 simple steps.

JavaScript