If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
पिछले Topic में आपने possible events के बारे में जाना , इस topic में आप सीखेंगे की उन events को कैसे handle करें और उन्हें अपनी need के according use करें।
किसी event को handle करने के लिए basically उस event को एक handler assign कर दिया जाता है। जहां handler कुछ और नहीं बल्कि एक Function होता है जो event के होने पर run होता है।
❕ Important
Web Events Core JavaScript Language का part नहीं हैं , ये Browser APIs का part होती हैं जो कि Browser में inbuilt होती है।
वैसे तो event handle करने के कई तरीके हैं , उनमे से कुछ main methods इस प्रकार हैं।
इस type के event handlers को HTML Tags में ही एक attribute की तरह से define (on
File : html_attr_evennts.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Event Handling</title>
</head>
<body>
<button onclick="alert('You clicked')">click Event</button>
<button onmouseover="alert('Mouse over me')">mouseover</button>
<button onmouseout="alert('You just remove the mouse')">mouseout</button>
<!-- now access the current element's html -->
<button onclick ="alert(this.innerHTML)"><b>Get HTML</b></button>
<!-- and try to eccess only text inside it -->
<button onclick ="alert(this.innerText)"><b>Get Only Text</b></button>
<!-- try to change it's text value -->
<button onclick ="this.innerText='This is new value' ">Click me to change</button>
</body>
</html>ऊपर दिए गए example में events को handle किया गया है। इस type की events को handle करते समय ध्यान रहे कि हमेशा dual quote के अंदर single quote use करें। और Single quote के अंदर dual quote .
इसके साथ साथ current element को access करने के लिए this keyword का use किया गया है , जो कि current element को present करता है।
हालाँकि Example में सभी events को HTML Attribute में ही Handle किया गया , यह आप तब use कर सकते हैं जब आपको बहुत छोटे Tasks करने हो।
बड़े Tasks के लिए आप JavaScript Function call कर सकते हैं , और उस Function के अंदर आप अपनी Need के According Logic Apply हैं।
For Example -
<!-- call a function with element Object on click -->
<button onclick="count(this)">You Clicked 0 Times</button>
<script type="text/javascript">
let number = 0;
function count(element){
number++;
element.innerText = `You Clicked ${number} Times`;
}
</script> O/P -
Explanation : इस Example में onclick event पर एक JavaScript Function call किया गया , और उस Function के अंदर Logic लिखा गया है। Function को call करते समय उसमे Current Element का Object Pass किया गया है , जिससे कि उस Element को Properties ( like : Text, HTML, या Attribute ) को get / set किया जा सके।
HTML Attribute में Events को Handle करना काफी पुराना तरीका है , और इस तरह से Projects में Events Handle करना अच्छी Practice भी नहीं है। हम Handler को उस element को Assign भी कर सकते हैं।
See Example :
<button id="count_button">You Clicked 0 Times</button>
<script type="text/javascript">
let number = 0;
count_button.onclick = function (){
number++;
count_button.innerText = `You Clicked ${number} Times`;
}
</script> O/P -
Explanation - One more thing , JavaScript में किसी element में defined ID के name से ही direct Element को select करके Event Handler Assign कर सकते हैं जैसे की ऊपर Example में दिखाया गया है।
ये handlers ठीक बैसे ही assign होते हैं , जैसे कि किसी variable में function Assign करना जिन्हे Anonymous Functions कहते हैं।
❕ Important
जब Event Handler को DOM Property के through assign करें तो इस बात का हमेशा ध्यान रहे कि Event Handler Function selected elements के बाद ही हो , other wise JS Error Generate कर देगी। क्योंकि JavaScript Scripting Language है , और हम defined ID के name से ही direct Element को select करते हैं।
जबकि HTML Attribute में function call करने पर वह function तभी call होता है जब कोई event होती है। इसलिए इस case में उस Function को Selected Element से पहले या बाद में कही भी रख सकते हैं।
आशा करता हूँ कि अब आप समझ गए होंगे की JavaScript में Events को कैसे Handle करते हैं।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
