Ads
What is event listener in JavaScript? Can anyone please post an example of Event listener??
Thanks in Advance!!
<html> <head> <title> Add Event Listener Example </title> </head> <body onload="init()"> </body>
Share on Google+ <html>
<head>
<script type="text/javascript">
function OnButtonDown (button) {
button.style.color = "#ff0000";
}
function OnButtonUp (button) {
button.style.color = "#000000";
}
function Init () {
var button = document.getElementById
("testButton");
if (button.addEventListener) {
button.addEventListener ("mousedown",
function () {OnButtonDown (button)}, false);
button.addEventListener ("mouseup",
function () {OnButtonUp (button)}, false);
}
else {
if (button.attachEvent) { version 9
button.attachEvent ("onmousedown",
function () {OnButtonDown (button)});
button.attachEvent ("onmouseup",
function () {OnButtonUp (button)});
}
}
}
</script>
</head>
<body onload="Init ()">
Click on the following button and see its text color.
<br />
<button id="testButton">Test button</button>
</body>
</html>
Here we are adding two event listeners
1.mouseup
<html>
<head>
<script type="text/javascript">
function OnButtonDown (button) {
button.style.color = "#ff0000";
}
function OnButtonUp (button) {
button.style.color = "#000000";
}
function Init () {
var button = document.getElementById
("testButton");
if (button.addEventListener) {
button.addEventListener ("mousedown",
function () {OnButtonDown (button)}, false);
button.addEventListener ("mouseup",
function () {OnButtonUp (button)}, false);
}
else {
if (button.attachEvent) { version 9
button.attachEvent ("onmousedown",
function () {OnButtonDown (button)});
button.attachEvent ("onmouseup",
function () {OnButtonUp (button)});
}
}
}
</script>
</head>
<body onload="Init ()">
Click on the following button and see its text color.
<br />
<button id="testButton">Test button</button>
</body>
</html>
Here we are adding two event listeners
1.mouseup
What is an Event Handling?
An Event - basically, an action or activity that goes on between the user and the application. In Java programming, In Java, Abstract Windowing Toolkit (AWT) handles such class and returns appropriate response to the user.
Event handling Is a method that understands the event and processes it.
Setting an even on button click
<html>
<script language="JavaScript">
<!--
function clickFirstButton()
{
document.myForm.button1.click();
}
-->
</script>
<form name="myForm">
<input type="button"
value="Display alert box"
name="button1"
onClick="alert('You clicked the first button.')"><br>
<input type="button"
value="Call on button 1"
name="button2"
onClick="clickFirstButton()">
</form>
</html>
Ads
Ads