सॉफ्टवेयर जनरेट किए गए ईवेंट DOM 2 ईवेंट

प्रविष्टि

हैलो, Habracheloveki।

इस लेख में मैं समुदाय को DOM इवेंट्स जैसी उपयोगी चीज़ के बारे में बताना चाहता हूँ। हर कोई जो किसी न किसी रूप में जावास्क्रिप्ट से जुड़ा हुआ है, जानता है कि इस भाषा में घटनाओं और उनके प्रसंस्करण सबसे महत्वपूर्ण और अक्सर उपयोग किए जाने वाले गुणों में से एक हैं, लेकिन बहुत से लोग नहीं जानते हैं कि इन घटनाओं को प्रोग्रामेटिक रूप से कैसे उत्पन्न किया जाए। दरअसल, लेख इसके लिए समर्पित है: यह बताता है कि यह क्या है, इसकी आवश्यकता क्यों है, और इसका उपयोग कैसे करें। श्रोताओं की कोई बात नहीं होगी, हालांकि यह विषय चर्चा के तहत विषय से बहुत निकट से संबंधित है।

यह क्या है

DOM ईवेंट DOM- ट्री (HTML, XHTML, XUL, SVG) के भीतर विभिन्न नोड्स पर विभिन्न ईवेंट हैंडलर / ईवेंट श्रोताओं को पंजीकृत करने के लिए जावास्क्रिप्ट, JScript, ECMAScript, VBScript और Java जैसी इवेंट-ओरिएंटेड प्रोग्रामिंग लैंग्वेज की अनुमति देता है। ।

यह, उदाहरण के लिए, onClick, onBlur, onMouseOver और इतने पर। इन घटनाओं को एक विशिष्ट उपयोगकर्ता कार्रवाई द्वारा ट्रिगर किया जाता है: कीस्ट्रोक, क्लिक, कर्सर आंदोलन एक तत्व की सीमाओं से परे। यही है, "नियंत्रण" पर एक भौतिक प्रभाव के साथ। हम इनपुट और हेरफेर उपकरणों के उपयोग के बिना, ऐसे कार्यक्रमों को प्रोग्रामेटिक रूप से लॉन्च करना सीखेंगे।

इसकी आवश्यकता क्यों है?

एप्लिकेशन बहुत अलग-अलग तरीकों से पाया जा सकता है : सिर्फ मज़े के लिए, bbmmorpg के लिए बॉट्स डेवलप करना , ऑटोमेशन स्क्रिप्ट्स, चीटिंग ("कीबोर्ड" के लिए स्क्रिप्ट: इनपुट लाइन में वांछित अक्षर डालना और ऑनकेप इवेंट को ट्रिगर करना), "वेब ड्यूअलिटी", मैं भी किसी तरह की यूनिट लिखने के विचार से मिला। टेस्ट। सामान्य तौर पर, कितनी कल्पना पर्याप्त है।

मुझे इंटरनेट पर इस विषय पर कोई समझदार नियमावली नहीं मिली, इसलिए मैंने हब पर अपने निष्कर्षों को कम करने और बनाए रखने का निर्णय लिया।

हालांकि, यह निम्नलिखित याद रखने योग्य है:

किसी घटना के "मैनुअल" ट्रिगर (पीढ़ी) इस घटना से जुड़ी एक डिफ़ॉल्ट कार्रवाई नहीं बनाता है। उदाहरण के लिए, प्रोग्रामेटिक रूप से किसी तत्व पर फोकस ईवेंट उत्पन्न करने का मतलब यह नहीं है कि यह फोकस प्राप्त करेगा, मैन्युअल रूप से जेनरेट की गई ईवेंट ईवेंट को डेटा भेजने के लिए बाध्य नहीं करेगी (फॉर्म की सबमिट विधि का उपयोग करें), उत्पन्न कीपर इवेंट का मतलब यह नहीं है कि प्रतीक इनपुट क्षेत्र में दिखाई देता है, लिंक पर प्रोग्रामेटिक क्लिक करें यह इसके माध्यम से संक्रमण को सक्रिय नहीं करता है, आदि ऐसे प्रतिबंध सुरक्षा उद्देश्यों के लिए आवश्यक हैं और स्क्रिप्ट को उपयोगकर्ता के काम और ब्राउज़र के साथ बातचीत करने से रोकते हैं।

इसका उपयोग कैसे करें?

सामान्य क्रम में, एल्गोरिथ्म एकल है:
- डोम नोड की वस्तु प्राप्त करें जिस पर घटना लटका दी जाएगी;
- घटनाओं के आवश्यक मॉड्यूल की एक वस्तु बनाएं;
- ईवेंट ऑब्जेक्ट को इनिशियलाइज़ करना;
- आवश्यक DOM नोड के लिए एक घटना असाइन करें;

आरंभ करने के लिए, मौजूदा मॉड्यूल से खुद को परिचित करें:
- घटनाएँ - मूल मॉड्यूल। सभी मॉड्यूल इसे विरासत में देते हैं, जिसकी चर्चा नीचे की जाएगी।
- HTMLEvents - DOM तत्वों की घटनाओं को शामिल करता है।
- UIEvents - कीबोर्ड इवेंट।
- माउसइवेंट्स - माउस इवेंट।
- MutationEvents - डोम ट्री संशोधन घटनाओं।

DOM 2 इवेंट स्ट्रक्चर

पाँच DOM 2 ईवेंट मॉड्यूल हैं। उनके नाम घटना के सार को दर्शाते हैं:

घटनाक्रम

• सभी प्रकार की घटनाओं को शामिल करता है।

HTMLEvents

• बीच में बंद करें
• कलंक
• परिवर्तन
• त्रुटि
• फोकस
• भार
• रीसेट
• आकार
• स्क्रॉल
• चुनना
• प्रस्तुत करना
• अनलोड

UIEvents

• DOMActivate
• DOMFocusIn
• DOMFocusOut
• keydown
• कुंजी दबाने
• KeyUp
• परोक्ष रूप से माउसएवेंट्स को भी कवर करता है

MouseEvents

• क्लिक
• mousedown
• MouseMove
• mouseout
• माउसओवर
• mouseup

MutationEvents

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

अन्य घटनाएँ (जैसे 'dblClick') विनिर्देश का हिस्सा नहीं हैं, और ब्राउज़र को उनके समर्थन की आवश्यकता नहीं है। ब्राउज़र जो उनका समर्थन करते हैं, वे या तो उपयुक्त मॉड्यूल का चयन करेंगे (उदाहरण के लिए, 'dblClick' माउसएवेंट्स मॉड्यूल के लिए बहुत उपयुक्त है) या एक नया मॉड्यूल बनाएँ। आपको यह जानना होगा कि कौन सा मॉड्यूल ब्राउज़र में ऐसी घटना का पता लगाएगा।

एक उदाहरण घटना को लागू करना - onClick

नकली घटनाओं को document.createEvent विधि का उपयोग करके बनाया जाता है, जो आवश्यक इवेंट में शामिल संगत ईवेंट मॉड्यूल के नाम को स्वीकार करता है। अगला, initEvent विधि (प्रत्येक मॉड्यूल के लिए विधि का नाम अलग है) का उपयोग करके घटना को तैयार करें और, अंत में, प्रेषण विधि का उपयोग करके निर्दिष्ट तत्व पर घटना को ट्रिगर करें। यदि आप जेनेरिक के बजाय अधिक विशिष्ट प्रकार के ईवेंट का उपयोग करते हैं, तो आप इसे तैयार करते समय ईवेंट के बारे में अतिरिक्त जानकारी प्रदान कर सकते हैं। कुछ गड़बड़ है, लेकिन उदाहरण सब कुछ स्पष्ट करेगा:

ऐसे तत्व पर 'क्लिक' ईवेंट बनाने के लिए जिसकी आईडी 'एलिमेंट_आईडी' के बराबर है, आपको चाहिए:

var element = document.getElementById('element_id'); //     var o = document.createEvent('MouseEvents'); //   ,     o.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null ); //    element.dispatchEvent(o); //     

चूंकि घटनाओं को शुरू करने और उनके वर्णन के तरीकों के मापदंडों की सूची बहुत बड़ी है, इसलिए विषय को अव्यवस्थित करने से बचने के लिए, मैं एक लिंक देता हूं, जिस पर क्लिक करके आप उनके साथ और अधिक विस्तार से खुद को परिचित कर सकते हैं। tyts । इसके अलावा, घटना को शुरू करने के तरीकों के नामों के नीचे मापदंडों के विवरण के साथ पृष्ठों के लिंक के रूप में डिज़ाइन किया गया है।

सभी मॉड्यूल के लिए ईवेंट इनिशियलाइज़ेशन के उदाहरण:

HTMLEvents और सामान्य घटनाएँ
initEvent ('प्रकार', बुलबुले, रद्द करने योग्य)

UIEvents
initUIEvent ('प्रकार', बुलबुले, रद्द करने योग्य, खिड़की पर आधारित, विस्तार)

MouseEvents
initMouseEvent ('प्रकार', बुलबुले, रद्द करने योग्य, WindowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, बटन, संबंधितटार्ग)

MutationEvents
initMutationEvent ('प्रकार', बुलबुले, रद्द करने योग्य, संबंधित नोड, prevValue, newValue, attrName, attrChange)

ध्यान दें कि हालांकि prevValue, NewValue, और attrName शून्य हो सकते हैं, attrChange को हमेशा परिभाषित किया जाना चाहिए, भले ही घटना DOMAttrModified (मान 1, 2, या 3) न हो

माउसएवेंट्स UIEvents का एक उपवर्ग है, जबकि बाद वाला ईवेंट मॉड्यूल का एक उपवर्ग है, इसलिए यदि आप एक माउसइवेंट्स ऑब्जेक्ट बनाते हैं, तो यह UIEvents और इवेंट इंटरफेस के initUIEvent और initEvent विधियों को भी इनहेरिट करेगा। तो आप इसे तैयार करते समय उपयोग करने के लिए एक घटना आरंभीकरण विधि चुन सकते हैं। (Nit * Event)

जेनेरिक ईवेंट मॉड्यूल का उपयोग करके किसी घटना को ट्रिगर करना (वंशानुक्रम का प्रदर्शन)

नीचे दिया गया उदाहरण एक घटना के ट्रिगरिंग को प्रदर्शित करता है जो जेनेटिक इनवेट विधि का उपयोग करता है और गुणों को उनके डिफ़ॉल्ट मानों में अपरिभाषित छोड़ दिया जाता है (हालांकि, जेनेरिक इनवेट या इनटाइइवेंट का उपयोग करते समय, आपको सटीक मॉड्यूल नाम का उपयोग करना चाहिए, न कि जेनेरिक मॉड्यूल का नाम, या यह मोज़िला / फ़ायरफ़ॉक्स, कोनेकर, सफारी) में काम नहीं करेगा:

 var element = document.getElementById('element_id'); var o = document.createEvent('MouseEvents'); o.initEvent('click', true, true); //     Events,     MouseEvents,     element.dispatchEvent(o); 

कीबोर्ड ईवेंट

कीबोर्ड की घटनाएं थोड़ी अधिक जटिल हैं, क्योंकि मोज़िला / फ़ायरफ़ॉक्स मानक को सही ढंग से लागू नहीं करता है, और आपको सामान्य (सामान्य) UIEvents (यह सिर्फ एक महत्वपूर्ण त्रुटि के साथ फ्रीज या क्रैश हो सकता है) का उपयोग करके महत्वपूर्ण घटनाओं को बनाने की अनुमति नहीं देगा। इसके बजाय, यह आंतरिक KeyEvents मॉड्यूल और initKeyEvent आरंभीकरण विधि प्रदान करता है। InitKeyEvent विधि निम्नलिखित मापदंडों को स्वीकार करती है: 'प्रकार', बुलबुले, रद्द करने योग्य, windowObject, ctrlKey, altKey, shiftKey, metaKey, keyCode, charCode। यदि आप ब्राउज़र में KeyEvents मॉड्यूल के लिए समर्थन का पता लगाने के लिए निर्माण (window.KeyEvent) का उपयोग कर सकते हैं। UIEvents का उपयोग करने वाले ब्राउज़रों के पास महत्वपूर्ण घटनाओं के लिए एक विशिष्ट आरंभीकरण फ़ंक्शन नहीं है, इसलिए कुछ गुणों को मैन्युअल रूप से जोड़ा जाना चाहिए:

 var element = document.getElementById('element_id'); if( window.KeyEvent ) //  FF { var o = document.createEvent('KeyEvents'); o.initKeyEvent( 'keyup', true, true, window, false, false, false, false, 13, 0 ); } else //    { var o = document.createEvent('UIEvents'); o.initUIEvent( 'keyup', true, true, window, 1 ); o.keyCode = 13; //   ,   initUIEvent    } element.dispatchEvent(evObj); 

इंटरनेट एक्सप्लोरर में घटनाएँ

इंटरनेट एक्सप्लोरर में घटनाओं का प्रारंभ अन्य ब्राउज़रों से काफी अलग है। IE में फायरईवेंट नामक एक घटना को मैन्युअल रूप से ट्रिगर करने के लिए एक विधि है, और IE 5.5 + के साथ उपलब्ध है। अपने सरलतम रूप में, यह DOM संस्करण के समान है, लेकिन बुलबुले और रद्द करने योग्य गुण उपलब्ध नहीं हैं। FireEvent विधि एक या दो मापदंडों को पारित करने की उम्मीद करती है। पहला ईवेंट का नाम होना चाहिए (उदाहरण के लिए, 'ऑनकेंज'), और वैकल्पिक दूसरा पैरामीटर ईवेंट ऑब्जेक्ट हैंडलर के पास होना चाहिए।

यद्यपि विंडो ऑब्जेक्ट IE में कई घटनाओं का पता लगा सकता है (उदाहरण के लिए, लोड, अनलोड, स्क्रॉल, आकार - यह सब, विनिर्देश के अनुसार, दस्तावेज़ ऑब्जेक्ट द्वारा पता लगाया जाना चाहिए, न कि विंडो), इसका मतलब यह नहीं है कि फायर ऑब्जेक्ट को विंडो ऑब्जेक्ट के साथ उपयोग किया जा सकता है ।

 var element = document.getElementById('element_id'); if(document.createEvent) //    { var o = document.createEvent('MouseEvents'); o.initEvent('click', true, false ); element.dispatchEvent(o); } else if( document.createEventObject ) //  IE { o.fireEvent('click'); } 

यदि आप ईवेंट के बारे में अतिरिक्त जानकारी प्रदान करना चाहते हैं, तो आपको CreateEvent और init * इवेंट DOM विधियों को दोहराने के लिए createEventObject पद्धति का उपयोग करना होगा। CreateEventObject विधि आमतौर पर एक खाली ईवेंट ऑब्जेक्ट देता है, और आपको स्वयं पैरामीटर निर्धारित करने की आवश्यकता होगी।

 var element = document.getElementById('element_id'); if(document.createEvent) //      { var o = document.createEvent('MouseEvents'); o.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null ); element.dispatchEvent(evObj); } else if(document.createEventObject) //    IE { var o = document.createEventObject(); o.detail = 0; o.screenX = 12; o.screenY = 345; o.clientX = 7; o.clientY = 220; o.ctrlKey = false; o.altKey = false; o.shiftKey = true; o.metaKey = false; o.button = 0; o.relatedTarget = null; element.fireEvent('click', o); } 

निष्कर्ष

मैंने विषय को बहुत संक्षेप में कवर किया, हालांकि, यह इसके सार को समझने के लिए पर्याप्त है। इवेंट जनरेशन आपको स्क्रीन के पीछे कई दिलचस्प चीजें करने की अनुमति देता है, और उपलब्ध घटनाओं की संख्या को देखते हुए, यह विषय और भी दिलचस्प हो जाता है।

लेख केवल कुछ उदाहरण और घटनाओं के प्रकार प्रदान करता है, हालांकि, शुरुआत में सूची से किसी भी अन्य का वर्णन करना मुश्किल नहीं है। उनकी बड़ी संख्या के कारण, सब कुछ के बारे में बताना असंभव है, लेकिन नाम खुद के लिए बोलते हैं, इसलिए जिज्ञासु% उपयोगकर्ता नाम% आसानी से वांछित घटना का विवरण, इसके मापदंडों की सूची और ली गई कार्रवाई को बताएगा।

बेतरतीब ढंग से उन्हें पैदा करने के बिना सफल जीवन की घटनाओं :)

क्या पढ़ना है?

लेख जो इस विषय के लिए आधार के रूप में कार्य करता है
इवेंट मॉड्यूल की संरचना का विवरण: टेबल, तुलना।
मोज़िला एमडीएन इवेंट्स के बारे में