জেভাস্ক্রিপ্ট এইচটিএমএল ডম ইভেন্ট লিসিনার

addEventListener() পদ্ধতি

ইনস্ট্যান্স

ব্যবহারকারী বাটন ক্লিক করলে ইভেন্ট ইনকিউড করুন:

document.getElementById("myBtn").addEventListener("click", displayDate);

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

addEventListener() এই পদ্ধতি নির্দিষ্ট ইলেকট্রনিকেন্টকে নির্দিষ্ট ইভেন্ট হ্যান্ডলার যোগ করে。

addEventListener() এই পদ্ধতি ইলেকট্রনিকেন্টকে ইভেন্ট হ্যান্ডলার যোগ করতে সাহায্য করে, এবং বর্তমান ইভেন্ট হ্যান্ডলারকে মেরামত করবে না。

আপনি একটি ইলেকট্রনিকেন্টে একাধিক ইভেন্ট হ্যান্ডলার যোগ করতে পারেন。

আপনি একই ইলেকট্রনে বেশ কয়েকটি একই ধরণের ইভেন্ট হ্যান্ডলার যোগ করতে পারেন, যেমন দুটি "click" ইভেন্ট।

আপনি যেকোনও DOM অবজেক্টে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন, যেমন window অবজেক্ট。

addEventListener() মথুক পদ্ধতিটি ব্যবহার করলে, ইভেন্ট বাবলিং ওপর নিয়ন্ত্রণ করার কাজ আরও সহজ হয়。

যখন addEventListener() মথুক পদ্ধতিটি ব্যবহার করলে, JavaScript এবং HTML ট্যাগগুলির মধ্যে আলাদা হয়, যার ফলে বেশি পড়াশুনা করা যায়; যদিও HTML ট্যাগটি নিয়ন্ত্রণ করা না হলেও ইভেন্ট লিস্টিনার যোগ করা যায়。

মতো পদ্ধতিটি ব্যবহার করে removeEventListener() ইভেন্ট লিস্টিনার সহজভাবে মিটাতে মতো মথুক পদ্ধতি。

গ্রামার

এলিমেন্ট.addEventListener(ইভেন্ট, ফাংশন, useCapture);

প্রথম পারামিটার হল ইভেন্টের ধরণ (যেমন "click" বা "mousedown")

দ্বিতীয় পারামিটার হল যে ফাংশনটি যা ইভেন্ট ঘটলে আমরা বলতে হবে।

তৃতীয় পারামিটার একটি বলুয়ান মান হয়, যা ইভেন্ট বাবলিং বা ইভেন্ট ক্যাপচার ব্যবহার করতে বলে। এই পারামিটার অপশনাল।

পরিমাপ:ইভেন্টকে "on" প্রিফিক্স ব্যবহার করতে না হয়; "click"-এর পরিবর্তে "onclick" ব্যবহার করুন।

ইলেকট্রনে ইভেন্ট হ্যান্ডলার যোগ করুন

ইনস্ট্যান্স

ব্যবহারকারী কোনও ইলেকট্রন ক্লিক করলে "Hello World!" প্রদর্শন করুন:

এলিমেন্ট.addEventListener("click", function(){ alert("Hello World!"); });

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

আপনি আরও বাইরের "নামকরণকৃত" ফাংশন উল্লেখ করতে পারেন:

ইনস্ট্যান্স

ব্যবহারকারী কোনও ইলেকট্রন ক্লিক করলে "Hello World!" প্রদর্শন করুন:

এলিমেন্ট.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

একই ইলেকট্রনে বেশ কয়েকটি ইভেন্ট হ্যান্ডলার যোগ করুন

addEventListener() এই পদ্ধতি আপনাকে একই ইলেকট্রনে বেশ কয়েকটি ইভেন্ট যোগ করতে দেয়, যার ফলে পুরনো ইভেন্টগুলি মিটানো হয় না:

ইনস্ট্যান্স

এলিমেন্ট.addEventListener("click", myFunction);
এলিমেন্ট.addEventListener("click", mySecondFunction);

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

আপনি একই ইলেকট্রনে ভিন্ন ধরণের ইভেন্ট যোগ করতে পারেন:

ইনস্ট্যান্স

এলিমেন্ট.addEventListener("mouseover", myFunction);
এলিমেন্ট.addEventListener("click", mySecondFunction);
এলিমেন্ট.addEventListener("mouseout", myThirdFunction);

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

Window অবজেক্টে ইভেন্ট হ্যান্ডলার যোগ করুন

addEventListener() এটি আপনাকে ইভেন্ট লিস্টিনার যোগ করতে দেয়, যেমন HTML ইলেকট্রন, HTML অবজেক্ট, window অবজেক্ট অথবা অন্য ইভেন্ট-সমর্থক অবজেক্ট, যেমন xmlHttpRequest অবজেক্ট。

ইনস্ট্যান্স

ব্যবহারকারী উইন্ডো মাপ করছে যখন ইভেন্ট ট্রিগার করে একটি ইভেন্ট লিস্টিনার যোগ করুন:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

পারামিটার পাঠানো

পারামিটার পাঠানোর সময়, নির্দিষ্ট ফাংশনটি কল করার জন্য "অক্রোশ্য ফাংশন" ব্যবহার করুন:

ইনস্ট্যান্স

এলিমেন্ট.addEventListener("click", function(){ myFunction(p1, p2); });

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ইভেন্ট বামুখী প্রসার কিংবা ইভেন্ট অপরাধীত প্রসার?

HTML DOM-এর দুইটি ইভেন্ট প্রসার পদ্ধতি রয়েছে: বামুখী প্রসার এবং অপরাধীত প্রসার

ইভেন্ট প্রসার হল ইভেন্ট ঘটার সময় তত্ত্বগুলির ক্রমবর্ধমান পদ্ধতি একটি নির্দেশ

বামুখী প্রসারে, সবচেয়ে অন্তর্নিহিত তত্ত্বটির ইভেন্ট প্রথম হয়, এরপরে আরও বাইরের তত্ত্বগুলি: প্রথম তত্ত্ব <p> এবং পরে <div> তত্ত্বের ক্লিক ইভেন্টকে প্রক্রিয়াকরণ করা হবে

অপরাধীত প্রসারে, সবচেয়ে বাইরের তত্ত্বটির ইভেন্ট প্রথম হয়, এরপরে আরও অন্তর্নিহিত তত্ত্বগুলি: প্রথম তত্ত্ব <div> এবং পরে <p> তত্ত্বের ক্লিক ইভেন্টকে প্রথম প্রক্রিয়াকরণ করা হবে

addEventListener() পদ্ধতিতে, আপনি "useCapture" পারামিটারটি ব্যবহার করে প্রসার প্রকার নির্ধারণ করতে পারেন:

addEventListener(ইভেন্ট, ফাংশন, useCapture);

ডিফল্ট মান falseব্যবহার করা হলে, ইভেন্ট বামুখী প্রসার ব্যবহার করা হবে trueতবে, ইভেন্ট অপরাধীত প্রসার ব্যবহার করা হবে

ইনস্ট্যান্স

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

removeEventListener() পদ্ধতি

removeEventListener() পদ্ধতি যেসব ইভেন্টকে removeEventListener() পদ্ধতিতে যুক্ত করা হয়েছে addEventListener() পদ্ধতির সঙ্গে যুক্ত ইভেন্ট হ্যান্ডলার:

ইনস্ট্যান্স

এলিমেন্ট.removeEventListener("mousemove", myFunction());

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ব্রাউজার সমর্থন

টেবিলের সংখ্যাগুলি এইসব পদ্ধতিগুলিকে সম্পূর্ণরূপে সমর্থন করা প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে

পদ্ধতি
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

মন্তব্য:IE 8, Opera 6.0 এবং তার আগের সংস্করণগুলি এইসব পদ্ধতিগুলিকে সম্পূর্ণরূপে সমর্থন করে না addEventListener() এবং removeEventListener() পদ্ধতি।কিন্তু,এই বিশেষ ব্রাউজার সংস্করণগুলির জন্য,আপনি ব্যবহার করতে পারেন attachEvent() মথুলা যুক্ত করা: detachEvent() মথুলা মুক্ত করা:

এলিমেন্ট.attachEvent(ইভেন্ট, ফাংশন);
এলিমেন্ট.detachEvent(ইভেন্ট, ফাংশন);

ইনস্ট্যান্স

ক্রস ব্রাউজার সলিউশন

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //  মূলধারা ব্রাউজারের জন্য, আইই 8 এবং আরও পুরানো সংস্করণ ছাড়া
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  //  আইই 8 এবং আরও পুরানো সংস্করণের জন্য
    x.attachEvent("onclick", myFunction);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এইচটিএমএল ডম ইভেন্ট অবজেক্ট রেফারেন্স ম্যানুয়েল

সমস্ত এইচটিএমএল ডম ইভেন্টের তালিকা পাওয়ার জন্য আমাদের সমপূর্ণ এইচটিএমএল ডম ইভেন্ট অবজেক্ট রেফারেন্স ম্যানুয়েল.