Events in JavaScript




Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/01/events-in-javascript.html

What is an event
An event is a signal from the browser that something has happened. For example,
1. When a user clicks on an HTML element, click event occurs
2. When a user moves the mouse over an HTML element, mouseover event occurs

When events occur, we can execute JavaScript code or functions in response to those events. To do this we need to associate JavaScript code or functions to the events. The function that executes in response to an event is called event handler.

In JavaScript, there are several ways to associate an event handler to the event
1. Using the attributes of an HTML tag
2. Using DOM object property
3. Using special methods

In this video we will discuss associating event handler methods to events using the attributes of HTML tags.

In the following example, the code to execute in response to onmouseover & onmouseout events is set directly in the HTML markup. The keyword “this” references the current element. In this example “this” references the button control.

[input type=”button” value=”Click me” id=”btn”
onmouseover=”this.style.background= ‘red’; this.style.color = ‘yellow’”
onmouseout=”this.style.background= ‘black’; this.style.color = ‘white’” /]

The above example, can be rewritten as shown below. In this case the code to execute in response to the event is placed inside a function and then the function is associated with the event.

[input type=”button” value=”Click me” id=”btn”
onmouseover=”changeColorOnMouseOver()”
onmouseout=”changeColorOnMouseOut()” /]

[script type=”text/javascript”]
function changeColorOnMouseOver()
{
var control = document.getElementById(“btn”);
control.style.background = ‘red’;
control.style.color = ‘yellow’;
}

function changeColorOnMouseOut()
{
var control = document.getElementById(“btn”);
control.style.background = ‘black’;
control.style.color = ‘white’;
}
[/script]

Events are very useful in real-world applications. For example they can be used to
1. Display confirmation dialog box on submitting a form
2. Form data validation and many more

How to show confirmation dialog in JavaScript

[input type=”submit” value=”Submit” id=”btn” onclick=”return confirmSubmit()” /]
[script type=”text/javascript”]
function confirmSubmit()
{
if (confirm(“Are you sure you want to submit”))
{
alert(“You selected OK”);
return true;
}
else
{
return false;
confirm(“You selected cancel”);
}
}
[/script]

JavaScript form validation example : In this example, both First Name and Last Name fields are required fields. When you type the first character in any of the textbox, the background colour is automatically changed to green. If you delete all the characters you typed or if you leave the textbox without entering any characters the background colour changes to red indicating the field is required. We made this possible using onkeyup and onblur events.

onkeyup occurs when the user releases a key.
onblur occurs when an element loses focus.

[table]
[tr]
[td]
First Name
[/td]
[td]
[input type=”text” id=”txtFirstName” onkeyup=”validateRequiredField(‘txtFirstName’)”
onblur=”validateRequiredField(‘txtFirstName’)”/]
[/td]
[/tr]
[tr]
[td]
Last Name
[/td]
[td]
[input type=”text” id=”txtLastName” onkeyup=”validateRequiredField(‘txtLastName’)”
onblur=”validateRequiredField(‘txtLastName’)”/]
[/td]
[/tr]
[/table]
[script type=”text/javascript”]
function validateRequiredField(controlId)
{
var control = document.getElementById(controlId);
control.style.color = ‘white’;
if (control.value == “”)
{
control.style.background = ‘red’;
}
else
{
control.style.background = ‘green’;
}
}
[/script]

Original source


20 responses to “Events in JavaScript”

  1. ternary:
    var message =(confirm("submit?"))? "You selected OK": "You selected cancel";
    alert(message);

    But the best I like in your videos, whenever I have a question, your answer is in the next video. 🙂

  2. you are Technology Guru sir.
    Guru brahma Gurur Vishnu Gurur devo maheswaraha.
    Gurur sakhath para brahma tasmaisri Gurave namaha
    Pranam to your holy feet sir. Millions of students clearly understood your videos sir. You are really a great person in the world

  3. Hi
    If I have a form in html, and I want to perform validation in text field, without repeatedly calling the function written in script for each text field. Rather the validation function should get executed on its own whenever the user tries to type on any of the text field.
    Can this be achieved?

  4. Hey Brother ! Take my cordial Love From Bangladesh.
    at the last sceen, i could not get the result like you ! where is the wrong , can you help me ?
    please give me just one miniute ,
    here is my code……….

    <body>
    <table>
    <tr>
    <td>
    First Name
    </td>
    <td>
    <input type="text" id="txtFirstName" onkeyup="validateRequiredField('txtFirstName')" onblur="validateRequiredField('txtFirstName')" />
    </td>
    </tr>
    <tr>
    <td>
    Last Name
    </td>
    <td>
    <input type="text" id="txtLastName" onkeyup="validateRequiredField('txtLastName')" onblur="validateRequiredField('txtLastName')" />
    </td>
    </tr>
    </table>

    <script type="text/javascript">
    function validateRequiredField(controlId) {
    var control = document.getElementByid(controlId);

    control.style.color='white';
    if (control.value=="") {
    control.style.background='red';
    }
    else
    {
    control.style.background='green';
    }

    }
    </script>
    </body>

  5. Why make a variable "control" if you can use directly the id of an element in your script?
    So:
    var control= document.getElementById("btn");
    control.style.background="red";

    instead of this you can use:

    btn.style.background="red";

    The last option also works but why dont they use the second option? Is there something wrong with this method ?

  6. HI Venkat,
    your videos are very nice to learn and understand. your explanantion with examples is simply super.
    Thanks you so much.
     please update 2 or 3 videos per day if possible. It will be helpful to us.

Leave a Reply