இந்த கட்டுரையில்
ஜாவாஸ்கிரிப்டில் ஈவண்டுகள் எவ்வாறு பயன்படுகின்றன என பார்க்க இருக்கின்றோம்.
முதலில் ஈவண்டுகள்
என்றால் என்ன என்று பார்ப்போம்.
ஈவண்டுகள் என்பது ஜாவாஸ்கிரிப்டில் நிகழ்த்தப்படும் அல்லது உணரப்படும்
செயல்கள் ஆகும்.
நம்மால் வெப்
பக்கத்தில் டைனமிக் இன்டெர்ஃபேஸ்களை உருவாக்க முடியும்.ஒவ்வொரு எலிமெண்டும் ஜாவாஸ்கிடிப்டை
ட்ரிக்கர் செய்யும் ஈவண்டுகளைக் கொண்டுள்ளது.
ஈவண்டுகள் ஆனது
ஃபங்க்சன்களுடன் இணைந்தே பயன்படுகின்றது. சான்றாக ஒரு பட்டனை கிளிக் செய்யும் பொழுது
onclick ஈவண்ட் நிகழ்கின்றது.
ஜாவாஸ்கிரிப்டில்
அதிகம் பயன்படுத்தப்படும் பொதுவான ஈவண்டுகள்.
- Onclick
- Onload
- Onchange
- Onkeydown
- Onmouseover
and
- On
mouseout
Onclick
Event
இது
ஒரு எலிமெண்டை கிளிக் செய்யும் பொழுது நிகழ்கின்றது.இது onclick பிராப்பர்ட்டி
கொண்ட html எலிமெண்டுகள் மீது நிகழ்கின்றது. இது பெரும்பாலும் பட்டன் கன்ட் ரோல்
மீது நிகழ்கின்றது.
Syntax
In
HTML Syntax,
1. <element onclick = “Some code”>
In
JavaScript Syntax,
1. object.onclick = “Some code”
சான்று
நிரல்.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Onclick Event in JavaScript</title>
</head>
<body>
<h2>Click the button show a Welcome message in alert box</h2>
<script type="text/javascript">
function msg(){
alert("Welcome to My WebPage!");
}
</script>
<button onclick="msg()">Click_here</button>
</body>
</html>
வெளியீடு:
Onload
event.
இந்த ஈவண்ட்
ஆனது ஒரு எலிமெண்ட் லோட் ஆகும் நிகழ்கின்றது. சான்றாக ஒரு பக்கம் லோட் ஆகும் பொழுது
onload ஈவண்ட் நிகழ்கின்றது.
Syntax
In
HTML Syntax,
1. <element onload = “Some code”>
In
JavaScript Syntax,
1. object.onload = “Some code”
சான்று நிரல்.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Onload Event</title>
</head>
<body onload="pageload()">
<h2>Onload event in Javascript</h2>
<h3>Once the page loaded the alert message will be displayed</h3>
<script type="text/javascript">
function pageload() {
alert("Page loaded Successfully!");//refersh the web page and check it
}
</script>
</body>
</html>
வெளியீடு:
Onchange
event.
இந்த ஈவண்ட்
ஆனது ஒரு html எலிமென்டின் மதிப்பு மாறும் பொழுது நிகழ்கின்றது.இந்த ஈவண்டை எல்லா பிரவுசர்களும்
சப்போர்ட் செய்கின்றது.
Syntax
In
HTML Syntax,
1. <element onchange = “Some code”>
In
JavaScript Syntax,
1. object.onchange = “Some code”
சான்று நிரல்
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events in Jvascript</title>
</head>
<body>
<h2>Onchange evetns in Javascript</h2>
<h3>select the Gender using onchange event</h3>
<select onchange="">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Others</option>
</select>
</body>
</html>
வெளியீடு
Onkeydown
event.
Syntax
In
HTML Syntax,
1. <element onkeydown = “Some code”>
In
JavaScript Syntax,
1. object.onkeydown = “Some code”
Example
This
example demonstrates JavaScriptOnkeydownevent:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onkeydown event</title>
</head>
<body>
<h2>Press any key in keyboard change color</h2>
<input type="text" id="kydwn" onkeydown="myfun()">
<script>
function myfun() {
document.getElementById("kydwn").style.backgroundColor = "green";
}
</script>
</body>
</html>
வெளியீடு:
Onmouseover
மற்றும் onmouseout ஈவண்டுகள்.
கீழ் வரும்
சான்று நிரலில் ஒரு எலிமெண்டின் நிறம் அதன் மேல் மவுஸ் நகரும் பொழுது மாறுவதை காட்டுகின்றது.
Syntax
In
HTML Syntax,
1. <element onmouseover = “Some code”>
2. <element onmouseout = “Some code”>
In
JavaScript Syntax,
1. object.onmouseover = “Some code”
2. object.onmouseout = “Some code”
Example
This
example demonstrates JavaScriptOnmouseoverand onmouseout event:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Events in JavaScript</title>
5. </head>
6. <body>
7. <h2>Onmouseover and onmouseout event in JavaScript</h2>
8. <script>
9. function musovr() {
10.
document.getElementById("chngclr").style.color = "red";
11.
}
12.
13.
function musout() {
14.
document.getElementById("chngclr").style.color = "green";
15.
}
16.
</script>
17.
<p id="chngclr" onmouseover="musovr()" onmouseout="musout()">Mouse over Event in JavaScript</p>
18.
</body>
19.
</html>
Syntax
In
HTML Syntax,
1. <element onmouseover = “Some code”>
2. <element onmouseout = “Some code”>
In
JavaScript Syntax,
1. object.onmouseover = “Some code”
2. object.onmouseout = “Some code”
Example
This
example demonstrates JavaScriptOnmouseoverand onmouseout event:
<!DOCTYPE html>
<html>
<head>
<title>Events in JavaScript</title>
</head>
<body>
<h2>Onmouseover and onmouseout event in JavaScript</h2>
<script>
function musovr() {
document.getElementById("chngclr").style.color = "red";
}
function musout() {
document.getElementById("chngclr").style.color = "green";
}
</script>
<p id="chngclr" onmouseover="musovr()" onmouseout="musout()">Mouse over Event in JavaScript</p>
</body>
</html>
வெளியீடு:
நன்றி.
முத்து கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment