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, WheelEvent।
উদাহরণ
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>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
"Simulate Mouse Out"-এ ক্লিক করলে বা বর্তমান প্যারাগ্রাফ থেকে মাউস আউট করলে অর্থাৎ মাউসকে <p> এলিমেন্টের ভিতর থেকে বাইরে আনলে কিছুবার -
উপরের উদাহরণে -
আমরা কিছু স্টাইলিংসহ একটি প্যারাগ্রাফ তৈরি করেছি এবং যখন মাউস সেই এলিমেন্টের বাইরে যাবে তখন এটি 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"-কে <p> এলিমেন্টে ডিসপ্যাচ করি প্যারাগ্রাফ নোডের dispatchEvent() মেথড ব্যবহার করে। <p> এলিমেন্টটি এখন একটি ইভেন্ট লিসেনার হিসেবে কাজ করবে -
function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); }
