Event-
An "event" generate a specific action in the browser. When an event occurs,like click on an HTML element, then a JavaScript can be executed.
A page load, pressing key, window resize are also example of an event. Events are part of the DOM(Document Object Model).
JavaScript has predefined names for the particular event.
We can fill up the HTML elements with our own programming and can create an artistic website.
There are more than 50 events but we use some of them mostly.
Some of them are below:-
1. onBlur-
onBlur event occurs when a user leaves an input field by clicking on some other element or pressing tab.
E.g of onBlur event:-
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>On leaving the input field the text will be changed into uppercase.</p>
</body>
</html>
2. onClick-
The most commonly used event type is onClick event. This event is occured when the user clicks on an object.
For e.g- button, image, link etc.
E.g of onClick event:-
<html>
<head>
<script type=text/javascript>
<!
function sayHello() {
alert(Hello World)
}
//>
</script>
</head>
<body>
<input type=button onclick=sayHello() value=Say Hello />
</body>
</html>
3. onChange -
This event is fired when a field is changed. This event triggers in dropdown list.
E.g of onChange event:-
<HTML>
<TITLE>onChange Event</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
}
</SCRIPT>
</HEAD>
<BODY>
<H3>onChange Event</H3>
Change the value<br>
<form name="myform">
<input type="text" name="data" value="10" size=10 onChange="valid(this.form)">
</form>
</BODY>
</HTML>
4. onLoad -
An onLoad event occurs when navigator finishes loading. Executes when load event finishes loading.
E.g of onLoad event is:-
<HTML>
<TITLE>onLoad Event</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function hello(){
alert("Hello there");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>onLoad Event</H3>
</BODY>
</HTML>
Some Events are below-
| Event Handler |
Event that it handles |
| onDblClick |
When user click twice on a button. |
| onKeydown |
When a key was pressed |
| onKeyup |
When a key is released |
| onSelect |
When user selects some content |
0 Comment(s)