HTML DOM createEvent() পদ্ধতি

HTML DOM createEvent() পদ্ধতিটি একটি ইভেন্ট অবজেক্ট তৈরি করার জন্য ব্যবহৃত হয় যার ধরনটি প্যারামিটারে নির্দিষ্ট করা হবে। তৈরি ইভেন্ট এটি ব্যবহার করার আগে আরম্ভ করা আবশ্যক. একটি HTML উপাদানে ইভেন্টটি প্রেরণ করতে আপনাকে সেই নির্দিষ্ট নোডে dispatchEvent() পদ্ধতি ব্যবহার করতে হবে৷

সিনট্যাক্স

HTML DOM createEvent() পদ্ধতি -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

document.createEvent( eventType )

এখানে, টাইপ স্ট্রিং টাইপের eventType একটি প্রয়োজনীয় প্যারামিটার। ইভেন্টের ধরনগুলি এইভাবে তালিকাভুক্ত করা হয়েছে:AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WP.

উদাহরণ

আসুন 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 DOM createEvent() পদ্ধতি

"সিমুলেট মাউস আউট" বা বর্তমান অনুচ্ছেদের বাইরে মাউসে ক্লিক করার সময় অর্থাৎ

উপাদানের ভিতরে থেকে মাউসকে কয়েকবার বাইরে নিয়ে আসা -

HTML DOM createEvent() পদ্ধতি

উপরের উদাহরণে -

আমরা এটিতে কিছু স্টাইলিং প্রয়োগ করে একটি অনুচ্ছেদ তৈরি করেছি এবং যখন মাউস সেই উপাদান থেকে বেরিয়ে আসে তখন এটি addText() পদ্ধতিটি কার্যকর করে।

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

তারপরে আমরা একটি বোতাম তৈরি করেছি "সিমুলেট মাউস আউট" যা ব্যবহারকারী দ্বারা ক্লিক করার পরে ইভেন্টএড() পদ্ধতিটি কার্যকর করে৷

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

addText() পদ্ধতি ডকুমেন্ট অবজেক্টের getElementById() পদ্ধতি ব্যবহার করে অনুচ্ছেদ উপাদান পায়। তারপরে এটি এর অভ্যন্তরীণ HTML বৈশিষ্ট্য ব্যবহার করে "Text" + ভেরিয়েবল i যুক্ত করে -

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

eventAdd() পদ্ধতি ডকুমেন্ট অবজেক্টের createEvent() পদ্ধতি ব্যবহার করে "MouseEvent" টাইপের একটি ইভেন্ট তৈরি করে। এটি তারপর প্যারামিটার, ইভেন্টের নাম=”মাউসআউট” বাবলিং=সত্য এবং বাতিলযোগ্য=সত্যের সাথে মাউস ইভেন্টকে আরম্ভ করে।

তারপরে আমরা প্যারাগ্রাফ নোডে dispatchEvent() পদ্ধতি ব্যবহার করে

এলিমেন্টে তৈরি করা “MouseEvent” প্রেরণ করি।

উপাদানটি এখন ইভেন্ট লিসেনার হিসেবে কাজ করবে −

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