Jassif Team Institution

addEventListener() পদ্ধতি

উদাহরণ

একটি ইভেন্ট লিসেনার যোগ করুন যা ব্যবহারকারী যখন একটি বোতামে ক্লিক করে তখন ফায়ার হয়:

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

addEventListener() পদ্ধতি একটি ইভেন্ট হ্যান্ডলারকে নির্দিষ্ট উপাদানের সাথে সংযুক্ত করে।

addEventListener() পদ্ধতি বিদ্যমান ইভেন্ট হ্যান্ডলারকে ওভাররাইড না করে একটি উপাদানের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করে।

সিনট্যাক্স

element.addEventListener(event, function, useCapture);

• প্রথম প্যারামিটার হল ইভেন্টের ধরন (যেমন "ক্লিক" বা "মাউসডাউন" বা অন্য কোনো HTML DOM ইভেন্ট)।
• দ্বিতীয় প্যারামিটার হল যে ফাংশনটি আমরা কল করতে চাই যখন ঘটনা ঘটে
• তৃতীয় প্যারামিটার হল একটি বুলিয়ান মান যা ইভেন্ট প্রেরণ বা ইভেন্ট ক্যাপচার ব্যবহার করবে কিনা তা নির্দিষ্ট করে। এই পরামিতি ঐচ্ছিক।

উপাদানটিতে একটি ইভেন্ট হ্যান্ডলার যোগ করা হচ্ছে

উদাহরণ 1

যখন ব্যবহারকারী একটি উপাদানে ক্লিক করে "হ্যালো ওয়ার্ল্ড!" সতর্কতা প্রদর্শন:

element.addEventListener("click", function(){ alert("Hello World!"); });

উদাহরণ 2

একটি বহিরাগত "নামযুক্ত" ফাংশন নির্দিষ্ট করা যেতে পারে:

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

একই উপাদানে একাধিক ইভেন্ট হ্যান্ডলার যোগ করা হচ্ছে

addEventListener() পদ্ধতি আপনাকে বিদ্যমান ইভেন্ট ওভাররাইড না করে একই উপাদানে একাধিক ইভেন্ট যোগ করতে দেয়:

উদাহরণ 1

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

উদাহরণ 2

একই উপাদানে বিভিন্ন ধরণের ইভেন্ট যোগ করা যেতে পারে:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

উইন্ডো অবজেক্টে একটি ইভেন্ট হ্যান্ডলার যোগ করা হচ্ছে

addEventListener() পদ্ধতি আপনাকে যেকোনো HTML DOM অবজেক্টে ইভেন্ট শ্রোতাদের যোগ করতে দেয়, যেমন HTML উপাদান, একটি HTML নথি, একটি উইন্ডো অবজেক্ট, বা অন্যান্য অবজেক্ট যা ইভেন্ট সমর্থন করে যেমন xmlHttpRequest অবজেক্ট।

উদাহরণ

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

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

পাসিং প্যারামিটার

প্যারামিটার মান পাস করার সময়, একটি "বেনামী ফাংশন" ব্যবহার করুন যা পরামিতি সহ নির্দিষ্ট ফাংশনকে কল করে:

উদাহরণ

element.addEventListener("click", function(){ myFunction(p1, p2); });

ইভেন্ট প্রেরণ বা ঘটনা ক্যাপচার?

HTML DOM-এ ইভেন্ট প্রচারের দুটি উপায় রয়েছে: প্রেরণ এবং ক্যাপচার।

ইভেন্ট প্রচার হল উপাদানগুলির ক্রম সংজ্ঞায়িত করার একটি উপায় যখন একটি ঘটনা ঘটে। যদি আপনার একটি <p> উপাদান একটি <div> উপাদানের মধ্যে থাকে এবং ব্যবহারকারী <p> উপাদানটিতে ক্লিক করেন, তাহলে কোন উপাদানটির "ক্লিক" ইভেন্টটি প্রথমে পরিচালনা করা উচিত?

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

addEventListener(event, function, useCapture);

ডিফল্ট মান মিথ্যা, যা বিতরণ বিতরণ ব্যবহার করবে। যখন মান সত্য সেট করা হয়, ইভেন্ট ক্যাপচার প্রচার ব্যবহার করে।

উদাহরণ

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

রিমুভ ইভেন্টলিস্টেনার() পদ্ধতি

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

উদাহরণ

element.removeEventListener("mousemove", myFunction);

HTML DOM ইভেন্ট অবজেক্ট রেফারেন্স

সমস্ত HTML DOM ইভেন্টের তালিকার জন্য, আমাদের সম্পূর্ণ HTML DOM ইভেন্ট অবজেক্ট রেফারেন্স দেখুন।

ইভেন্টলিসনার টিউটোরিয়াল