HTML DOM createEvent() मेथड

HTML DOM createEvent() मेथड का उपयोग एक इवेंट ऑब्जेक्ट बनाने के लिए किया जाता है जिसका टाइप पैरामीटर में निर्दिष्ट होगा। बनाए गए इवेंट को उपयोग करने से पहले इनिशियलाइज़ किया जाना चाहिए। इवेंट को HTML एलिमेंट में डिस्पैच करने के लिए आपको उस निर्दिष्ट नोड पर dispatchEvent() मेथड का उपयोग करना होगा।

सिंटैक्स (Syntax)

HTML DOM createEvent() मेथड का सिंटैक्स:

document.createEvent(eventType)

यहां, स्ट्रिंग टाइप का eventType एक आवश्यक पैरामीटर है। इवेंट टाइप्स इस प्रकार सूचीबद्ध हैं: AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent।

उदाहरण (Example)

createEvent() मेथड का एक उदाहरण:

<!DOCTYPE html> <html> <body> <style> p { border: solid 1px blue; background-color: lightgreen; } </style> <h2>createEvent() example</h2> <script> var i = 0; function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); } function addText() { var txt = document.getElementById("PAR1"); txt.innerHTML += " TEXT" + i; i++; } </script> <p onmouseout="addText()" id="PAR1">This is a sample paragraph</p> <button onclick="eventAdd()">Simulate Mouse Out</button> </script> </body> </html>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM createEvent() मेथड

"Simulate Mouse Out" पर क्लिक करने या वर्तमान पैराग्राफ से माउस आउट करने पर यानी माउस को <p> एलिमेंट के अंदर से बाहर लाने पर कुछ बार:

HTML DOM createEvent() मेथड

उपरोक्त उदाहरण में:

हमने कुछ स्टाइलिंग के साथ एक पैराग्राफ बनाया है और जब माउस उस एलिमेंट से बाहर निकलता है तो यह addText() मेथड एक्जीक्यूट करता है:

p { border: solid 1px blue; background-color: lightgreen; } <p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>

फिर हमने एक "Simulate mouse out" बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर eventAdd() मेथड को एक्जीक्यूट करता है:

<button onclick="eventAdd()">Simulate Mouse Out</button>

addText() मेथड डॉक्यूमेंट ऑब्जेक्ट के getElementById() मेथड का उपयोग करके पैराग्राफ एलिमेंट को प्राप्त करता है। फिर यह इसकी innerHTML प्रॉपर्टी का उपयोग करके "TEXT" + वेरिएबल i को इसमें जोड़ता है:

function addText() { var txt = document.getElementById("PAR1"); txt.innerHTML += " TEXT" + i; i++; }

eventAdd() मेथड डॉक्यूमेंट ऑब्जेक्ट के createEvent() मेथड का उपयोग करके "MouseEvent" टाइप का एक इवेंट बनाता है। फिर यह माउस इवेंट को पैरामीटर्स के साथ इनिशियलाइज़ करता है: इवेंट नेम = "mouseout", बबलिंग = true और कैंसलेबल = true।

फिर हम बनाए गए "MouseEvent" को dispatchEvent() मेथड का उपयोग करके <p> एलिमेंट पर डिस्पैच करते हैं। <p> एलिमेंट अब एक इवेंट लिसनर के रूप में कार्य करेगा:

function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); }