List various events on various HTML elements and explain Event Handling in JavaScript with example

27views

written 7.8 years ago by

Various Events occurring on HTML page are:

onload: When a action needs to be triggered on loading of a HTML page, this event is used.
onreset: When a action needs to be triggered on reset of page, this event is used.
onsubmit: When a action needs to be triggered on click of submit button, this event is used.
onclick: When a action needs to be triggered on mouse click, this event is used.
ondblclick: When a action needs to be triggered on double mouse click, this event is used.
onkeypress: When a action needs to be triggered on key press, this event is used.
onkeyup: When a action needs to be triggered on pressing UP key, this event is used.
onkeydown: When a action needs to be triggered on pressing down key, this event is used.
onmousedown: When a action needs to be triggered on left mouse click, this event is used.
onmouseup: When a action needs to be triggered on right mouse click, this event is used.
onmouseover: When a action needs to be triggered on moving the mouse, this event is used.

An event handler executes a segment of a code based on certain events occurring within the application, such as onLoad, onClick.

JavaScript event handers can be divided into two parts: interactive event handlers and non-interactive event handlers.

An interactive event handler is the one that depends on the user interactivity with the form or the document. For example, onMouseOver is an interactive event

On the other hand non-interactive event handler would be onLoad, because this event handler would automatically execute JavaScript code without the user's interactivity.

onLoad: - An onLoad event occurs when a window or image finishes loading. - For windows, this event handler is specified in the BODY attribute of the window. - In an image, the event handler will execute handler text when the image is loaded. For example:

<IMG NAME="myimage" SRC="https://rhoque.com/ad_rh.jpg" onLoad="alert('You loaded myimage')">

Code:

<HTML>
<TITLE>Example of onLoad Event Handler</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function hello(){
alert("Hello there...\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>

The example shows how the function hello() is called by using the onLoad event handler.

onClick:

In an onClick event handler, JavaScript function is called when an object in a button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is checked or an image map area is selected.

Except for the regular button and the area, the onClick event handler can return false to cancel the action. For example:

<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return confirm(`Are you sure you want to submit the form?')">

Note: On Windows platform, the onClick event handler does not work with reset

See Example:

<HTML>
    <HEAD>
    <TITLE>Example of onClick Event Handler</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    function valid(form){
    var input=0;
    input=document.myform.data.value;   
    alert("Hello " + input + " ! Welcome...");
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <H3> Example of onClick Event Handler </H3>
    Click on the button after inputting your name into the text box:<br>
    <form name="myform">
    <input type="text" name="data" value="" size=10>
    <INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)">
    </form>
    </BODY>
    </HTML>

In this example, when the user clicks the button "Click Here", the onClick event handler calls the function valid().

onSubmit:

An onSubmit event handler calls JavaScript code when the form is submitted.

Example:

<HTML>
<TITLE> Example of onSubmit Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
 Type your name and press the button<br>
 <form name="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')">
 <input type="text" name="data">
 <input type="submit" name ="submit" value="Submit this form">
 </form>
 </BODY>

In this example, the onSubmit event handler calls an alert() function when the button "Sumbit this form" is pressed.

onMouseOut:

JavaScript code is called when the mouse leaves a specific link or an object or area from outside that object or area. For area object the event handler is specified with the <area> tag.

Example:

<HTML>
<TITLE> Example of onMouseOut Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over <A HREF="" onMouseOut="window.status='You left the link!' ; return true;"> here</a> and then take the mouse pointer away.
</BODY>
</HTML>

In the above example, after pointing your mouse and leaving the link , the text "You left the link!" appears on your window's status bar.

ADD COMMENT EDIT