HTML डोम createEvent () विधि

<घंटा/>

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

सिंटैक्स

HTML DOM createEvent () विधि के लिए सिंटैक्स निम्नलिखित है -

document.createEvent( eventType )

यहां, टाइप स्ट्रिंग प्रकार का इवेंट टाइप एक आवश्यक पैरामीटर है। घटनाओं के प्रकार के रूप में सूचीबद्ध हैं:एनिमेशनइवेंट, क्लिपबोर्डइवेंट, ड्रैगएवेंट, फोकसएवेंट, हैशचेंजइवेंट, इनपुटइवेंट, कीबोर्डएवेंट, माउसइवेंट, पेजट्रांसिशनएवेंट, पॉपस्टेटइवेंट, प्रोग्रेसइवेंट, स्टोरेजएवेंट, टचएवेंट, ट्रांजिशनइवेंट, यूआईईवेंट, व्हीलएवेंट।

उदाहरण

आइए 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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

HTML डोम createEvent () विधि

"सिम्युलेट माउस आउट" या माउस को वर्तमान पैराग्राफ से बाहर क्लिक करने पर यानी माउस को

एलिमेंट के अंदर से बाहर की ओर कुछ बार लाने पर -

HTML डोम createEvent () विधि

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

हमने उस पर लागू कुछ स्टाइल के साथ एक पैराग्राफ बनाया है और जब माउस उस तत्व से बाहर हो जाता है तो यह एडटेक्स्ट () विधि को निष्पादित करता है।

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

हमने तब एक बटन "सिम्युलेट माउस आउट" बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर EventAdd () विधि को निष्पादित करता है।

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

AddText () विधि दस्तावेज़ ऑब्जेक्ट के getElementById () विधि का उपयोग करके पैराग्राफ तत्व प्राप्त करती है। इसके बाद यह अपनी आंतरिक HTML संपत्ति -

. का उपयोग करके "पाठ" + चर i को इसमें जोड़ता है

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

EventAdd () विधि दस्तावेज़ ऑब्जेक्ट के createEvent () विधि का उपयोग करके "माउसइवेंट" प्रकार की एक घटना बनाती है। इसके बाद यह पैरामीटर के साथ माउस इवेंट को इनिशियलाइज़ करता है, इवेंट का नाम ="माउसआउट" बबलिंग =ट्रू और कैंसलेबल =ट्रू।

हम तब "माउसइवेंट" भेजते हैं जिसे हमने पैराग्राफ नोड पर डिस्पैचएवेंट () विधि का उपयोग करके

तत्व में बनाया है।

तत्व अब एक ईवेंट श्रोता के रूप में कार्य करेगा -

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