|
Event |
Description |
|
onchange |
An HTML element has been changed |
|
onclick |
The user clicks an HTML element |
|
onmouseover |
The user moves the mouse over an HTML element |
|
onmouseout |
The user moves the mouse away from an HTML element |
|
onkeydown |
The user pushes a keyboard key |
|
onload |
The browser has finished loading the page |
(1)Example
1 onclick event save onclick.html:
<!DOCTYPE html>
<html>
<body>
<p>Click the button
to display the date.</p>
<button
onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p
id="demo"></p>
</body>
</html>
(2)Example 2 on
onload Event save file onload.html:
<!DOCTYPE html>
<html>
<body
onload="displayDate()">
<p>Click the button
to display the date.</p>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p
id="demo"></p>
</body>
</html>
(3)Example 3 onmouseover
save file as onmouseover.html:
<!DOCTYPE html>
<html>
<body>
<p>Click the button
to display the date.</p>
<button
onmouseover="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p
id="demo"></p>
</body>
</html>
(4)Example 4 on
onchange event SAVE file onchange.html:
<!DOCTYPE html>
<html>
<body>
<p>Click the button
to display the date.</p>
<select
name=city onchange="displayDate()">
<option
value=mumbai> Mumbai</option>
<option
value=delhi>Delhi</option>
</select>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p
id="demo"></p>
</body>
</html>
(5)Example 5
onkeydown event save file as onkeydown.html:
<!DOCTYPE html>
<html>
<body>
<p>Click the button
to display the date.</p>
<input type=text
name=name onkeydown="displayDate()">
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p
id="demo"></p>
</body>
</html>
JavaScript
addEventListener()
The addEventListener() method is an inbuilt function of JavaScript
. We can add multiple event handlers to a particular element
without overwriting the existing event handlers.
Syntax
element.addEventListener(event, function, useCapture);
Although it has three parameters, the parameters event and function are
widely used. The third parameter is optional to define. The values of this
function are defined as follows.
Parameter Values
event: It is a required parameter. It can be defined as a string
that specifies the event's name.
function: It is also a required
parameter. It is a JavaScript
function
which responds to the event occur.
Example :-
<!DOCTYPE html>
<html>
<body>
<p> Example of the addEventListener() method. </p>
<p> Click the following button to see the effect.
</p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<script>
document.getElementById("btn").addEventListener("click",
fun);
function fun() {
document.getElementById("para").innerHTML =
"Hello World" + "<br>" + "Welcome to the vissicomp";
}
</script>
</body>
</html>
Another example :-
<!DOCTYPE html>
<html>
<body>
<p> This is an example of adding multiple events to
the same element. </p>
<p> Click the following button to see the effect.
</p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<p id = "para1"></p>
<script>
function fun() {
alert("Welcome to the vissicomp.in");
}
function fun1() {
document.getElementById("para").innerHTML = "This is second function";
}
function fun2() {
document.getElementById("para1").innerHTML = "This is third function";
}
var mybtn = document.getElementById("btn");
mybtn.addEventListener("click", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("click", fun2);
</script>
</body>
</html>
No comments:
Post a Comment