jQuery நிகழ்வுகள் (Events) பற்றி அறிந்து கொள்ளுங்கள்
jQuery என்பது எளிமையான மற்றும் சக்திவாய்ந்த JavaScript நூலகம் ஆகும், இது HTML ஆவணங்களை எளிதாக நிர்வகிக்க உதவுகிறது. jQuery-யில் நிகழ்வுகள் (Events) என்பவை, உபயோகபபாளர்கள் எவ்வாறு ஒரு இணையப்பக்கத்துடன் தொடர்பு கொள்கின்றனர் என்பதை ஒழுங்குபடுத்த உதவுகிறது. இப்பதிவில் jQuery நிகழ்வுகள் எவ்வாறு செயல்படுகின்றன என்பதையும், அவற்றைப் பயன்படுத்துவது எப்படி என்பதையும் பார்க்கலாம்.
jQuery நிகழ்வுகள் என்றால் என்ன?
நிகழ்வுகள் (Events) என்பது ஒரு பகுதியின் (Element) மீது உபயோகபபாளர்கள் செய்யும் செயல்களை குறிக்கின்றன. உதாரணமாக, click, hover, submit, மற்றும் keydown ஆகியவை முக்கியமான jQuery நிகழ்வுகளாகும். இவற்றின் மூலம் ஒரு பகுதிக்கான செயலை உருவாக்கலாம்.
jQuery-ல் நிகழ்வுகளை எப்படி பயன்படுத்துவது?
jQuery-ல், நிகழ்வுகளை பண்படுத்துவதற்கு நாங்கள் எளிமையாக ஒரு selector-ஐ தேர்வு செய்து அதற்கு நிகழ்வு விசாரணைகளை (Event Handlers) வழங்க முடியும்:
$("selector").event(function(){
// செயல்பாடு
});selector: jQuery-ல் HTML பகுதியை தேர்வு செய்யும் வாக்கியம்.
event: நிகழ்வு பெயர் (Click, Hover, Submit போன்றவை).
பிரபலமான jQuery நிகழ்வுகள்
1. Click நிகழ்வு (Click Event)
ஒரு பகுதியை கிளிக் செய்தபோது நிகழும் செயல்களை ஒழுங்குபடுத்த click நிகழ்வை பயன்படுத்தலாம்.
$(document).ready(function(){
$("#myButton").click(function(){
alert("Button clicked!");
});
});இங்கு, #myButton என்ற ID கொண்ட பகுதியை கிளிக் செய்தால், ஒரு எச்சரிக்கை (Alert) செய்தி தோன்றும்.
2. Hover நிகழ்வு (Hover Event)
ஒரு பகுதியின் மீது கற்றை (Mouse Pointer) செல்லும்போது நடக்கும் நிகழ்வுகளுக்கான செயல்பாடுகளை நிர்ணயிக்க hover ஐ பயன்படுத்தலாம்.
$(document).ready(function(){
$("#myDiv").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "white");
});
});இங்கு, #myDiv பகுதியில் கற்றை வரும்போது அதன் பின்னணி நிறம் மஞ்சளாக மாறும், கற்றை வெளியே செல்லும்போது மறுபடியும் வெள்ளையாக மாறும்.
3. Keydown நிகழ்வு (Keydown Event)
உபயோகபபாளர்கள் ஒரு விசையை அழுத்தும் போது ஏற்படும் நிகழ்வுகளை நிர்வகிக்க keydown பயன்படுத்தப்படுகிறது.
$(document).ready(function(){
$(document).keydown(function(event){
alert("You pressed: " + event.key);
});
});இங்கு, எந்தவொரு விசையையும் அழுத்தும்போது, அந்த விசையின் பெயர் எச்சரிக்கை செய்தியாக காண்பிக்கப்படும்.
4. Submit நிகழ்வு (Submit Event)
HTML படிவத்தை (Form) சமர்ப்பிக்கும் போது ஏற்படும் நிகழ்வுகளை நிர்வகிக்க submit நிகழ்வை பயன்படுத்தலாம்.
$(document).ready(function(){
$("form").submit(function(event){
alert("Form submitted successfully!");
event.preventDefault();
});
});இங்கு, ஒரு படிவத்தை சமர்ப்பிக்கும்போது (Submit) எச்சரிக்கை செய்தி தோன்றும். event.preventDefault() என்ற பகுதி, படிவத்தை சமர்ப்பிக்கும் செயல்பாட்டை தடுக்கிறது.
நிகழ்வுகளை தொடங்க (Trigger) செய்வது
jQuery-யில், நிகழ்வுகளை செயல்படுத்த அனுமதிக்கும் செயல்பாடுகள் உள்ளன. இதன் மூலம், ஒரு நிகழ்வை கையில் கொண்டு (Manually) இயக்க முடியும்.
$(document).ready(function(){
$("#myButton").click(function(){
alert("Button clicked!");
});
// Click நிகழ்வை மெய்நிகராக இயக்குதல்
$("#myButton").trigger("click");
});இந்த நிரலில், #myButton என்கிற பகுதி, கிளிக் செய்யாமல் trigger() மூலம் செயல்படுத்தப்படுகிறது.
முழு நிரல் (Complete Code)
<!DOCTYPE html>
<html>
<head>
<title>jQuery Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Click Event
$("#myButton").click(function(){
alert("Button clicked!");
});
// Hover Event
$("#myDiv").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "white");
});
// Keydown Event
$(document).keydown(function(event){
alert("You pressed: " + event.key);
});
// Submit Event
$("form").submit(function(event){
alert("Form submitted successfully!");
event.preventDefault();
});
});
</script>
</head>
<body>
<h1>jQuery Events Example</h1>
<button id="myButton">Click Me</button>
<div id="myDiv" style="width:200px;height:200px;border:1px solid black;margin-top:20px;"></div>
<form>
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
</body>
</html>முடிவு
jQuery நிகழ்வுகள் உபயோகபபாளர்கள் உங்கள் வலைப்பக்கத்துடன் எப்படி தொடர்பு கொள்கிறார்கள் என்பதை நிர்வகிக்க உதவுகின்றன. Click, Hover, Submit, மற்றும் Keydown போன்ற முக்கிய நிகழ்வுகளை பயன்படுத்தி வலைப்பக்கங்களில் நிறைய மாற்றங்களை கொண்டுவரலாம்.
