in

JAVASCRIPT EVENT | Learn How To Structure Events Using JavaScript

In this tutorial we will be discussing about JavaScript Event which entails how to structure events on web pages using JavaScript. In our previous tutorial we looked at JavaScript functions and we explained how to define and structure functions in JavaScript. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: JAVASCRIPT FUNCTIONS | Introduction To Functions In JavaScript

JAVASCRIPT EVENTS

HTML tends to communicate with JavaScript using events. Events are activities carried out by users on the web page. Example of events include clicking, hovering over text, minimizing and maximizing the window, scrolling , loading and reloading of pages etc

Developers can use this events to trigger or execute JavaScript codes. That is why you can click on a button and a form submits, or close a browser using a button etc. There are different events installed in HTML and some of them will be explained below

ONCLICK EVENT

This is the most common type of event done by users on web pages. This event involves users clicking on buttons on web pages. This event can be used to alert JavaScript to execute an action such as alert a message or display a message etc. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script>
      function alertHello(){
         alert('hello buddie!');
      }
   </script>
   <title>ONCLICK EVENT</title>
</head>
<body>
   <input type="button" value="click me" onclick="alertHello()"  >
</body>
</html>

RESULT

ONCLICK EVENT

ONMOUSEOVER AND ONMOUSEOUT JAVASCRIPT EVENT

The onmouseover and onmouseout events is use to carry out an action when a user hover over a text or button using the mouse cursor. example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script>
      function alertHello(){
         alert('hello buddie!');
      }
   </script>
   <title>Document</title>
</head>
<body>
   <input type="button" value="move mouse over here" onmouseover="alertHello()"  >
</body>
</html>

RESULT

Document

ONSUBMIT JAVASCRIPT EVENT

The onsubmit event comes into play when you want to submit a form on the web page. This event can be use to trigger the JavaScript to execute actions such as validation of the form before submission. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script>
      function submitFunction(){
         //validation statement goes here
      }
   </script>
   <title>onsubmit event</title>
</head>
<body>
   <form method="POST" action="" onsubmit="">
<input type="button" value="submit">
   </form>
</body>
</html>

HTML LIST OF EVENTS

EVENT DESCRIPTION HTML5
onerror This event is comes up when an error is encountered 5
onbeforeprint This event comes up before a document is printed 5
onafterprint This event comes up after a document is printed 5
onload This event comes up when a document loads  
onoffline This event comes up when a document goes offline 5
onmessage This event comes when a message is triggered 5
onpagehide This event comes up when a window goes hidden 5
onhaschange This event comes up when a document has changed 5
onpageshow This event comes up when a document becomes visible 5
onpopstate This event comes up when a windows history changes 5
onredo This event comes up when a redo is performed on a document 5
onresize This event comes up when a document is resized 5
onunload This event comes up when a document is unloaded  
onstorage This event comes up when a document is stored 5
onundo This event comes up when a document undo is triggered 5
ononline This event is triggered when a document comes online 5

CONCLUSION

With the help of this tutorial we hope you are able to structure events on your web pages when coding in JavaScript.

NET TUTORIAL: JAVASCRIPT COOKIES

What do you think?

javascript functions

JAVASCRIPT FUNCTIONS | Introduction To Functions In JavaScript

javascript cookie

JavaScript Cookies | Learn How To Structure Cookies Using JavaScript