To totally unlock this section you need to Log-in

Besides the mouse and keyboard events, there are more events available in JavaScript, which we are going to discuss in this article:

onBlur: this event is raised when a select, text, or textarea form item is acted upon and then moved off of by the user. In other words, when the item losses focus the onBlur event is raised.

onChange : this event is raised when the text in a select, text, or textarea form item is altered by the user.

onClick: this event is raised when the user clicks the user clicks on an object, for example: button, image, hyperlink, etc.

onFocus: thisevent is raised when a select, text or textarea items is selected on an HTML form.

onSelect: this event, as its name implies, is raised when some tex in a text box or text area is selected.

onSubmit: this is an important event that is raised when the submit button on an HTML form is clicked to submit the form data to the web server. Sanity checking of the data being submitted can be performed on the client side using this event.

onBlur

In HTML:

<element onblur="myScript">

In JavaScript:

object.onblur=function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("blur", myScript);

onClick

This is the most frequently used event type which occurs when a user clicks mouse left button. You can put your validation, warning, etc. against this event type.

Example:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

This will produce following result and when you click Hello button then onclick event will occur which will trigger sayHello() function.

onSubmit

Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type.

Here is simple example showing its usage. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true the form will be submitted otherwise it will not submit the data.

Example:

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
   all validation goes here
   .........
   return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

onChange

The onchange attribute fires the moment when the value of the element is changed.

Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements.

To detect when the contents have changed, use the onpropertychange event in Internet Explorer and the oninput event in Firefox, Opera, Google Chrome and Safari (and in Internet Explorer from version 9). In Google Chrome, Safari and in Internet Explorer from version 9, the textInput event can also be used.

For a cross-browser solution to detect when the checked state has changed, use the onclick event instead.

<head>
    <script type="text/javascript">
        function OnSelectionChange (select) {
            var selectedOption = select.options[select.selectedIndex];
            alert ("The selected option is " + selectedOption.value);
        }
    </script>
</head>
<body>
    Select an item from the following list:

    <select onchange="OnSelectionChange (this)">
        <option value="Apple" />Apple
        <option value="Pear" />Pear
        <option value="Peach" />Peach
    </select>
</body>

onFocus

The onfocus attribute captures the moment when an element receives the focus of the user’s attention. This is determined to be the point at which a user clicks inside an element that can be activated or manipulated, such as a form input element or select element, both of which are used for data entry purposes, or an a element, which can be activated with the Return key.

Typically, this attribute is used to highlight the section of the page that currently has focus—a useful usability enhancement, particularly for people with low vision—or to provide additional information. For example, when a user’s completing a form, additional help text can be made to appear alongside the form input that currently has focus.

<head>
    <script type="text/javascript">
        function OnFocusInput (input) {
            input.style.color = "red";
        }

        function OnBlurInput (input) {
            input.style.color = "";
        }
    </script>
</head>
<body>
    When the following input field has the focus its text color will be red.
    Click into the input field!
    


    <input type="text" onfocus="OnFocusInput (this)" onblur="OnBlurInput (this)" value="Custom input field"/>
</body>

onSelect

The onselect event fires when the target element has its text selected (highlighted by the user). It is commonly used to alter or save the portion of text that the user selects, as well as Rich Text Editor programming.

The onselect attribute is used in forms, specifically on the text input and textarea form controls. When the user selects any text inside these elements, either by clicking and dragging the cursor, or using keyboard text selection commands (such as pressing Shift + Right arrow key), the onselect attribute captures this event.

Execute a JavaScript when some text has been selected:

<input type="text" onselect="myFunction()">

onBlur

Executes JavaScript whenever a user moves with the mouse the focus away from an element within a form. In other words, whenever a person first clicks an element, and then clicks anywhere outside of it.

Use the focus events to determine when to prepare an object to receive or validate input from the user. Actions that invoke the onblur event:

Clicking outside the active element.
Navigating away from the active element with the TAB or an access key.
Switching to another document or application.
Invoking the setActive method on a non-active element that can be active.
Invoking the focus method on a non-active element that can be active.
Invoking the blur method on the active element.

<script>
function emailcheck(){
var string1=document.example.email.value
if (string1.indexOf("@")==-1){
.alert("Please input a valid email address!")
.document.example.email.focus()
.}
}
</script>

<form name="example"><input type="text" size="20" name="email" onblur="emailcheck()">
<strong>Feedback please:</strong>
<textarea name="S1" rows="2" cols="20">
<input type="submit" name="B1" value="Submit">
</form>

HTML4 Events Overview

The following table will show some common and most used javascript events defined in HTML4 standard.

Search by Keyword