HTML DOM addEventListener() পদ্ধতি

সংজ্ঞা ও ব্যবহার

addEventListener() ঘটনা হান্ডলারকে এলিমেন্টে জুড়ানো হয়。

উদাহরণ

উদাহরণ 1

একটি <button> ইলেকট্রনিক সামগ্রীতে click ঘটনা যোগ করুন:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 2

আরও সংক্ষিপ্ত কোড:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

আপনার হাতে পরীক্ষা করুন

পানের নিচে আরও উদাহরণ পাবেন。

সংজ্ঞা

element.addEventListener(type, function, useCapture)

পারামিটার

পারামিটার বর্ণনা
type

বাধ্যতামূলক।ঘটনার নাম。

"on" প্রিফিক্স ব্যবহার করুন না。

"click" ব্যবহার করুন না যদি "onclick"。


DOM ইভেন্টের সমস্ত তালিকা
function বাধ্যতামূলক।ঘটনা ঘটলে চালানো ফাংশন。
useCapture

বাধ্যতামূলক (ডিফল্ট = false)。

  • false - হ্যান্ডলার বালুম পর্যায়ে কাজ করে。
  • true - হ্যান্ডলার ক্যাপচার পর্যায়ে কাজ করে。

ফলাফল

না।

প্রযুক্তিগত বিবরণ

এই পদ্ধতিটি নির্দিষ্ট ঘটনা শুনোত্ব ফাংশনটিকে বর্তমান নোডকে ঘটনা শুনোত্ব সংকলনে নথিভুক্ত করবে, যাতে নির্দিষ্ট ধরণের ঘটনা পরিচালনা করা যায়。 type ঘটনার useCapture যদি এটি true, তখন ঘটনা শুনোত্বকে পরিগণিত করা হবে হ্যান্ডলার useCapture যদি এটি false, তখন এটি সাধারণ ঘটনা শুনোত্ব হিসাবে নথিভুক্ত করা হবে。

addEventListener() বার বার কল করা হতে পারে, একই নোডকে একইভাবে একই ধরণের ঘটনার জন্য একাধিক ঘটনা হ্যান্ডলার নথিভুক্ত করা হতে পারে।কিন্তু ধ্যান দিন, DOM একাধিক ঘটনা হ্যান্ডলারকে কল করা হওয়ার ক্রমকে নির্ধারণ করতে পারে না。

যদি একটি ঘটনা শুনোত্ব ফাংশনটি একই নোডকে একইভাবে type এবং useCapture প্রামাণ্যতা দুবার নথিভুক্ত করা হয়, তখন দ্বিতীয় নথিভুক্ত করা প্রামাণ্যতা অণচালিত হবে।যদি একটি নোডকে ঘটনা সম্পর্কে কাজকর্ম করা হচ্ছে এবং এই নোডকে একটি নতুন ঘটনা শুনোত্ব নথিভুক্ত করা হয়,তখন তাকে ঘটনার জন্য নতুন ঘটনা শুনোত্ব কল করা হবে না。

যখন Node.cloneNode() পদ্ধতিটি বা Document.importNode() পদ্ধতিটি একটি Document নোডকে কপি করতে যখন, মূল নোডকে নথিভুক্ত ঘটনা শুনোত্ব কপি করে না。

এই পদ্ধতিটি Document এবং Window এই অবজেক্টে পরিভাষিত এবং কাজকর্ম অনুরূপ

আরও উদাহরণ

উদাহরণ 3

আপনি একই ইলেকট্রনিক সামগ্রীতে অনেকগুলি ঘটনা যোগ করতে পারেন:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

আপনার হাতে পরীক্ষা করুন

উদাহরণ 4

আপনি একই ইলেকট্রনিক সামগ্রীতে বিভিন্ন ঘটনা যোগ করতে পারেন:

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

আপনার হাতে পরীক্ষা করুন

উদাহরণ 5

পারামিটার মান পাঠাতে, "অবহিত ফাংশন" ব্যবহার করুন:

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

আপনার হাতে পরীক্ষা করুন

উদাহরণ 6

বক্স টেমপ্লেটের ব্যাকগ্রাউন্ড কালার পরিবর্তন করুন:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

আপনার হাতে পরীক্ষা করুন

উদাহরণ 7

বাবলিং ও ক্যাপচারিং-এর পার্থক্য:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

আপনার হাতে পরীক্ষা করুন

উদাহরণ 8

ইভেন্ট হ্যান্ডলার মুক্ত করুন:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

আপনার হাতে পরীক্ষা করুন

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

element.addEventListener() এটা DOM Level 2 (2001) এর একটি ফংশন।

সমস্ত ব্রাউজারই এটা সম্পূর্ণভাবে সমর্থন করে:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
সমর্থন 9-11 সমর্থন সমর্থন সমর্থন সমর্থন

সংশ্লিষ্ট পৃষ্ঠা

ইলেকট্রনিক পদ্ধতি:

addEventListener() পদ্ধতি

removeEventListener() পদ্ধতি

ডকুমেন্ট পদ্ধতি:

addEventListener() পদ্ধতি

removeEventListener() পদ্ধতি

শিক্ষাদত্ত্র:

HTML DOM EventListener

DOM ইভেন্টের সমস্ত তালিকা