JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
Here we will see some examples, here I am explained few examples only.
1.Onclick Event:
It is the most frequently used event type, you just click the button then it shows the output.
<html>
<head>
<script type="text/javascript">
function SayHello() {
alert("Hello World");
}
</script>
</head>
<body>
<p>Click me then see the result</p>
<label>
<input type="button" onclick="SayHello()" value="SayHello"/>
</label>
<label>
<button type="button" onclick="this.innerHTML=Date()">
Time
</button>
</label>
</body>
</html>
Output:
2.Onload:
Execute a javascript immediately after a page has been loaded
<html>
<head>
<script>
function load() {
alert("Click ok I will show output");
}
</script>
</head>
<body onload="load()">
<h1>Hello Viewer</h1>
</body>
</html>
output:
3.Ondblclick:
Execute a javascript when an element is double clicked
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"This is the example for double click event";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">
<button>Click Me Double</button>
</p>
<p id="demo"></p>
</body>
</html>
output:
↕
4.Onmouseover & Onmouseout:
<!DOCTYPE html>
<html>
<head>
<script>
function over(x) {
x.style.color='red'; }
function out(x) {
x.style.color='green';
}
</script>
</head>
<body>
<div onmouseover="over(this)" onmouseout="out(this)">
<h1> Hai Visitor </h1>
</div>
</body>
</html>
Output:
Onmouseover output: Onmouseout output:
5. Onkeypress:
Key press event is fired when a key that produce a character value is pressed down.
<!DOCTYPE html> <html> <head> <script> function press() { alert("You Pressed A Key Inside The Input Box"); } function out(x) { x.style.color='green'; } </script> </head> <body> <p>If you have to press any key in text box then it shows the alert</p> <input type="text" onkeypress="press()"> </body> </html>output:
No comments:
Post a Comment