Let’s Work With JavaScript Events

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.



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:



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:



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.



After filling in this form, when we click on the submit button an alert box appears and shows the Text message:



So these are examples of JavaScript Events.

Note: Now do some exercises yourself and if you have questions then provide them in the Comments.