In this article we will learn various events in JavaScript.
Various events in JavaScript
In this article we will learn various events in JavaScript.
I hope you are well known about event driven programming model. Event is
nothing but an action against certain operation. For example one user is
clicking on one button and for that some operation has done, so user has done
this operation by button’s click event. In JavaScript many more events are there,
in this article we will try to understand few of them.
Click event of button
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('button clicked');
}
</script>
<input type="button" name="Button" value="Click" onclick="fun()" />
</body>
</html>
In this button definition we have attached onclick() event
which will call fun() function. Here is sample example.
mouseover event in JavaScript
mouseover event occur when user will put mouse over any
object. In this example we are calling fun() function onmouseover event of button.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('Mouse Over event');
}
</script>
<input type="button" name="Button" value="Click" onmouseover="fun()" />
</body>
</html>
onchange event to detect text change
onchange event is used to detect text change event of text
box. In this example we are calling fun function on onchange event. When we
will change text of textbox the event will generate.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('Text change event');
}
</script>
<input type="text" name="name" onchange="fun()" />
</body>
</html>
Here is sample output of this example.
ondoubleclick event
ondoubleclick event will generate when we make double click
on button. In this example we are
calling fun() function ondoubleclick() event of button.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('double click event');
}
</script>
<input type="button" name="name" value="doule click" ondblclick ="fun()" />
</body>
</html>
onfocus event
onfocus event occurs when we set focus on some control, for example
we want to put some text in textbox and for that we have placed cursor there.
In this scenario onfocus event occur. Here is example of onfocus event of text
box.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('focus on text box');
}
</script>
<input type="text" name="name" value="" onfocus ="fun()" />
</body>
</html>
onblur event of textbox
when we lost focus over one control at that moment onblur
event occur. Here is sample implementation of onblur event in JavaScript.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('Focus has lost');
}
</script>
<input type="text" name="name" value="" onblur ="fun()" />
</body>
</html>
This is sample output of above program.
onkeypress event of text box
onkeypress event occurs when we press any key over any
control. In this example we are calling fun() function in onkeypress event of
JavaScript.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun() {
console.log('Key
press event occur');
}
</script>
<input type="text" name="name" value="" onkeypress ="fun()" />
</body>
</html>
Conclusion:-
In this article we have learned various events in
JavaScript. These events are useful in form validation. Hope you have enjoyed this
article.