Fundamentals of Event Handling in JavaScript

Fundamentals of Event Handling – पिछले Web Page के JavaScript Code में हमने JavaScript Event Handling Code को Use किया है। Events के बारे में विस्तार से हम आगे समझेंगे लेकिन फिर भी यहां कुछ Fundamental समझ लेना जरूरी है, ताकि Event Handling Chapter से पहले बनाए गए सभी JavaScript Codes को आप बेहतर तरीके से समझ सकें।

GUI Programming यानी Graphical User Interface Programming में जो भी Software या Application Develop किए जाते हैं, वे Event Driven Programming Concept पर आधारित होते हैं।

Event एक प्रकार की घटना होती है, जिसे हमारे Computer का Operating System समझता है और उस घटना के अनुसार Respond करता है।

उदाहरण के लिए जब हम किसी Software के Window के Minimize Button पर Click करते हैं, तो click Event Trigger होता है और इस Event के Response में हमारे Computer का Operating System उस Window को Minimize कर देता है, जिसके Minimize Button पर हमने Click किया होता है।

इसी तरह से जब हम किसी Application के किसी Form Window पर दिखाई देने वाले Text Box में कोई Character Type करते हैं, तो Keyboard का keypress Event Trigger होता है और इस Event के Response में हमारे Computer का Operating System उस Text Box में वह Character Display कर देता है, जिसे हमने Keyboard पर Press किया होता है।

इसी तरह से विभिन्न प्रकार के Applications में विभिन्न प्रकार के Events Trigger होते हैं, जिन्हें Operating System द्वारा Handle किया जाता है और क्योंकि Web Browser भी एक प्रकार का Application Software ही है, इसलिए Web Browser में भी विभिन्न प्रकार के Events Trigger हो सकते हैं।

उदाहरण के लिए हम किसी Web Page पर दिखाई देने वाले किसी Hyperlink को Click कर सकते हैं और जब हम Click करते हैं, तो click Event Fire होता है। परिणामस्वरूप हमारा Web Browser इस Click Event के Response में उस Hyperlink से Associated Resource को Web Browser में Load कर देता है, जिस पर हमने Click किया था।

इसी प्रकार से जब हम हमारे Web Browser को Minimize, Maximize, Restore, Close, Resize आदि करते हैं अथवा Web Page के किसी Element पर Mouse से Click, Double Click करते हैं अथवा Mouse Pointer को किसी HTML Element पर Move करते हैं अथवा Keyboard से किसी Button को Press करते हैं, तो विभिन्न प्रकार के Events Trigger होते हैं।

इसलिए यदि हम चाहें, तो इन Events के Trigger होने के Response में ऐसा JavaScript Code लिख सकते हैं, जो केवल उसी स्थिति में Execute होता है, जब वह Event Trigger होता है, जिसके साथ उस JavaScript Code को Attach किया गया होता है।

इस प्रकार की Programming Technique जिसमें किसी Action के Reaction में यानी किसी Event के Response में क्या होना चाहिए, इस बात को निि”चत करते हुए Programming की जाती है, को Event Driven Programmingकहते हैं और जब हम Web Browser में Event Driven Programming करते हैं, तब हम ऐसा JavaScript Code Create करते हैं, जो केवल तभी Run होता है, जब उस JavaScript Code से Associated Event Fire होता है।

चूंकि किसी HTML Web Page पर जितने भी Elements होते हैं, उन सभी Elements के साथ हम विभिन्न प्रकार के Mouse व Keyboard Events को Associate कर सकते हैं। इसी तरह से Web Browser के विभिन्न Objects के साथ भी हम विभिन्न प्रकार के Events को Associate कर सकते हैं।

जब हम हमारे JavaScript Code को केवल <script> Element के बीच Specify करते हैं, तो Web Page के Load होते समय जो भी JavaScript Code, JavaScript Interpreter को मिलता है, JavaScript Interpreter उसे Run कर देता है।

लेकिन जब हम हमारी सुविधानुसार किसी JavaScript Code को किसी Event के Response में तब Run करवाना चाहते हैं जब कोई Specific Event Fire होता है, तो इस जरूरत को पूरा करने के लिए हमें दो काम करने पडते हैं:

• हमें किसी Event को उस Object के साथ Specify करना होता है, जिस पर Event Fire होगा।
• Fire होने वाले Event को Responseकरने के लिए हमें एक Event Handler Function Create करना होगा।

अब हम हमारे पिछले JavaScript Program के Code को समझने की कोशिश करते हैं। चूंकि जैसाकि हम जानते हैं कि यदि हम हमारे JavaScript को निम्नानुसार लिखते-

            document.write(“Current Date and Time: <strong>”+ Date() +”</strong>”);

तो ये JavaScript Code ठीक उसी समय Execute हो जाता, जब Web Browser में Web Page Parse होकर Render होता क्योंकि Web Browser में सारे Codes Up to Down व Left to Right Parse होते हैं। इसलिए JavaScript Interpreter जैसे ही इस JavaScript Code पर पहुंचता, वह उसे Run कर देता और Web Browser में Current Date and Time Displayहो जाता।

लेकिन हमने हमारे पिछले Web Page में JavaScript Code को निम्नानुसार लिखा है:

window.onload = function(){
          document.write(“Current Date and Time: <strong>”+ Date() +”</strong>”);
}

ये JavaScript Code वास्तव में Execute नहीं होता बल्कि Memory में Store हो जाता है। क्योंकि ये Code सामान्‍य JavaScript Code नहीं है बल्कि एक Event Handler JavaScript Function Code है जिसे Web Browser के window Object की onload Event Property के साथ Attach किया गया है जो इस बात का Signal है कि ये JavaScript Function तब Execute होगा जब Web Browser में Current Web Page पूरी तरह से Load हो जाएगा।

जैसाकि हमने पहले कहा कि Web Browser व Web Browser में Loaded विभिन्न HTML Elements विभिन्न प्रकार के Events Trigger करते हैं। इसलिए जब किसी Web Browser में कोई Web Page पूरी तरह से Load हो जाता है, तब Web Browser “load” नाम का एक Event Fire करता है, जो इस बात का Signal होता है कि Current Web Page, Web Browser में पूरी तरह से Load हो चुका है।

Web Browser के window Object के साथ इस load Event का उपयोग करते हुए हम चाहते हैं कि जब Web Browser में कोई Web Page पूरी तरह से Load हो जाए, तब निम्न JavaScript Code Run हो न कि तब जब Web Page, Current Web Browser में Load हो रहा हो-

            document.write(“Current Date and Time: <strong>”+ Date() +”</strong>”);

इस जरूरत को पूरा करने के लिए हमने window.onload Property के साथ एक JavaScript Function को Attach किया है जो कि एक Event Handler Code है।

यानी हम चाहते हैं कि Date तब Display हो, जब Web Page पूरी तरह से Load हो चुका हो। इसलिए हमने Date Display करने से सम्बंधित document.write() Method को एक Event Handler Function के अन्दर Define किया है। (Function के बारे में हम आगे विस्तार से पडेंगे।)

हमारा जो Event Handler Code यहां पर हमने Define किया है, वह Code एक Anonymous Function है। जब JavaScript Interpreter इस Code को Read करता है, तो वह उसे Memory में Store कर देता है और वह Anonymous Function Memory में जिस जगह पर Store होता है, उस जगह का एक Pointer Return करता है। इस Return होने वाले Pointer को window.onload Property में Store कर दिया जाता है।

परिणामस्वरूप हमारा Web Page जैसे ही Web Browser के window Object में पूरी तरह से Load हो जाता है, Web Browser “load” नाम का Event Fire करता है। परिणामस्वरूप JavaScript Interpreter window Object की onload Property को Check करता है कि उसमें किसी Executable Code का Pointer Stored है या नहीं।

चूंकि हमने एक Anonymous Function को window की onload Property में Assign किया है जो कि एक Executable Code है, इसलिए JavaScript Interpreter तुरन्त उस Memory Location पर पहुंचता है, जिसका Pointer window के onload Property में Stored है और चूंकि इस Memory Location पर निम्नानुसार एक Executable JavaScript Statement होता है:

            document.write(“Current Date and Time: <strong>”+ Date() +”</strong>”);

इसलिए JavaScript इस Executable Statement को Execute कर देता है। परिणामस्वरूप Currently Loaded Web Page में जो भी Content होता है, write() Method उसे Overwrite करके उसके स्थान पर Current Date and Time Display कर देता है।

इसी प्रकार से हम यदि चाहें कि Current Date and Time तब Display नहीं होना चाहिए, जब Web Page, Web Browser के Window Object में पूरी तरह से Load हो जाए, बल्कि तब होना चाहिए, जब हम Web Page पर दिखाई देने वाले Heading पर Click करें। तो इस जरूरत को पूरा करने के लिए हम निम्नानुसार <h1> Element के साथ अपने JavaScript Code को Attach कर सकते हैं:

जब हम इस Web Page को Render करते हैं तो इसका Output निम्नानुसार Render होता है:

लेकिन जैसे ही हम इस दिखाई देने वाले Heading1 Content “Click Me to show Current Date and Time” Message पर Click करते हैं, हमारा Web Page Content Change होकर निम्नानुसार “Current Date and Time” से Overwrite हो जाता है:

चलिए, इस Web Page के JavaScript Code को भी थोडा समझ लेते हैं। जब हम किसी HTML Element के साथ किसी Event Handler को Associate करना चाहते हैं, तब हमें दो काम करने पडते हैं:

• जिस HTML Element के साथ हमें Event Handler को Associate करना होता है, उस Element में हमें id Attribute को Specify करना जरूरी होता है।
• हमें उस HTML Element का Reference प्राप्त करना होता है, जिसके साथ Event Handler Function को Attach करना है।

हालांकि पिछले Web Page में हमने सीधे ही window Object के साथ onload Event Handler को Attach कर दिया था, क्योंकि window ,d Global Object होने की वजह से पूरे JavaScript Code में कहीं भी Accessible रहता है।

लेकिन हमारे Web Page के Elements, Global Objects की तरह व्;वहार नहीं करते बल्कि हमारे पूरे Web Page के सभी Elements, Attributes, Texts आदि हमारे Computer की Memory में Nodes की एक Hierarchy के रूप में Organize रहते हैं, जिसे DOM Treeकहते हैं।

इसलिए जब हम किसी HTML Element के साथ किसी Event Handler को Attach करना चाहते हैं, तो सबसे पहले हमें उस HTML Element का Reference या Pointer प्राप्त करना होता है जिसके साथ हम हमारे Event Handler को Attach करना चाहते हैं और DOM Tree (In-Memory Representation of Web Page) में से किसी Element के Reference या Pointer को प्राप्त करने के लिए हमें getElementById() Method को Use करना होता है।

getElementById() JavaScript द्वारा Provided एक ऐसा Method है, जो Argument के रूप में उस Element के IDको Accept करता है, जिसका Reference या Pointer Return करना होता है।

इसीलिए हमने निम्नानुसार JavaScript Code द्वारा सबसे पहले उस <h1> Element का DOM Tree Reference प्राप्त किया है, जिसके साथ हमें हमारे Click Event Handler Code को Attach करना है:

            var clickMeDOMTreeReference = document.getElementById(“clickMe”);

और इस <h1> Element का Reference हम इसीलिए प्राप्त कर पा रहे हैं, क्योंकि हमने हमारे <h1> Element के id Attribute में निम्नानुसार “clickMe” मान Specify किया है:

            <h1 id=“clickMe”>Click Me to show Current Date and Time</h1>

इस प्रकार से जब हमें clickMeDOMTreeReferenceVariable में <h1> Element का Reference प्राप्त हो जाता है, तो हम इस <h1> Element के साथ निम्नानुसार Code द्वारा एक Click Event Handler Associate कर सकते हैं:

clickMeDOMTreeReference.onclick = function(){
          document.write(“Current Date and Time: <strong>”+ Date() +”</strong>”);
}

परिणामस्वरूप जब हम हमारे Current Web Page को Web Browser में Load करके दिखाई देने वाले Heading पर Click करते हैं, तो JavaScript Interpreter उस JavaScript Anonymous Function Code को Run कर देता है, जिसका Reference clickMeDOMTreeReference Variable में Stored होता है।

यानी अब हमारा JavaScript Code तब Run नहीं होता] तब Web Page पूरी तरह से Web Browser में Load हो जाता है, बल्कि तब Run होता है, जब हम Web Browser में दिखाई देने वाले Heading पर Click करते हैं।

इस पुस्तक में Event Handling से सम्बंधित पूरा एक Chapter है, जिसमें विभिन्न प्रकार के Event Handling Methods को Detail से Discuss किया गया है। फिर भी उपरोक्त Event Handling तरीके को ठीक से समझना आपके लिए उपयोगी रहेगा ताकि आगे आने वाले Chapters में दिए गए विभिन्न प्रकार के Codes व Concepts के आधार पर आप स्वयं अपना Event Driven Program बना सकें।