Let’s Work With JavaScript Events

Introduction

 
As we discussed in a previous article (Basics of Events in JavaScript) about some event names, there are many other events in JavaScript. 
 
Some events used with Media Elements in HTML are:
  • onabort
  • oncanplay
  • oncalplaythrough
  • ondurationchange
  • onended
  • onerror
  • onlodeddata
  • onloadedmetadata
  • onloadstart
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onseeked
  • onseeking
  • onstalled
  • onsuspended
  • ontimeupdate
  • onvalumechange
  • onwaiting
Some events that are very important for our browser are:
  • onafterprint
  • onbeforeprint
  • onbeforeload
  • onblur
  • onerror
  • onfocus
  • onhaschange
  • onload
  • onmessage
  • onoffline
  • ononline
  • onpagehide
  • onpageshow
  • onpopstate
  • onredo
  • onresize
  • onstorage
  • onundo
  • onunload
So these are some important events that are used in JavaScript for making a webpage more interactive.
 
Now let's do some live work with these events. We can't discuss all events but some important events can be discussed.
 
onload Event
 
The onload event triggers when a website has been loaded in a browser. This event is defined in the BODY element. Let's write some HTML code.
 
JavaScript Events
 
Here we have defined the onload event in the BODY element, that displays an alert box showing the text "Welcome to My World!" when a web page loads. The output for the code above will be:
 
JavaScript Events
 
So this was a little bit about the onload event, do some more exercises yourself.
 
onsubmit Event
 
The onsubmit event is used with the FORM element and triggered when the form is submitted. Let's create a form and understand the onsubmit event, the HTML code is as in the following:
 
JavaScript Events
 
The code above is for FORM, here we added some fields like Name, Phone, Address and Email id. Next we have defined the onsubmit event in the FORM element, that displays a message.
 
JavaScript Events
 
After filling in this form, when we click on the submit button an alert box appears and shows the Text message:
 
JavaScript Events
 
So these are examples of JavaScript Events.
 
Note: Now do some exercises yourself and if you have questions then provide them in the Comments.