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”
Thanks for your videos Venkat.
At 11:43, you are passing a controlID parameter and then using it in the document.getelement(ControlID). Can you please let me know which element in the DOM has the ID – ControlID.
Thanks for your videos Venkat.
At 11:43, you are passing a controlID parameter and then using it in the document.getelement(ControlID). Can you please let me know which element in the DOM has the ID – ControlID.
excellent
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. 🙂
well done, sir 🙂
congratulations
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
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?
Mk
tnq sr.your videos are good one to easily explain the example,learn and understanding.,.
i didn't get why we needed a argument over there??
why didn't we use id name in get by id??
At least i know how much means JQuery now!
Hello sir,
Thank for tutorial.
Can you please provide video for Custom Events in JavaScipt? Why we need of Custom Events?
sorry I dont undertsand when you do the confirmation function where the confirm is from
IF ( confirm ("are you confirming ? ") {}) thanks to clarify
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>
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 ?
He is a great and very patient teacher. Great for beginners in programming.
thank u sir…!
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.
nice