HTML DOM Document addEventListener() মথড

অর্থ ও ব্যবহার

addEventListener() মথুর ইভেন্ট হ্যান্ডলার যোগ করে।

ইনস্ট্যান্স

উদাহরণ 1

ডকুমেন্টে click ইভেন্ট যোগ করুন:

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

আপনার নিজেই প্রয়াস করুন

সহজ সংজ্ঞা

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

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2

আপনি ডকুমেন্টে বেশ কয়েকটি ঘটনা সংশ্লিষ্টকারী যোগ করতে পারেন:

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

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3

আপনি ভিন্ন ধরনের ঘটনা যোগ করতে পারেন:

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

আপনার নিজেই প্রয়াস করুন

উদাহরণ 4

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

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

আপনার নিজেই প্রয়াস করুন

উদাহরণ 5

ডকুমেন্টের পটভূমির রঙ পরিবর্তন করুন:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

আপনার নিজেই প্রয়াস করুন

উদাহরণ 6

removeEventListener() মথুর ব্যবহার করে:

// ঘটনা সংশ্লিষ্টকারী যোগ করা
document.addEventListener("mousemove", myFunction);
// ঘটনা সংশ্লিষ্টকারী তুলে নেওয়া
document.removeEventListener("mousemove", myFunction);

আপনার নিজেই প্রয়াস করুন

সংজ্ঞা

document.addEventListener(type, function, capture)

পারামিটার

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

অপরিহার্য। ঘটনার নাম

অনুগ্রহ করে "on" প্রিফিক্স ব্যবহার করুন না

অনুগ্রহ করে "click" ব্যবহার করুন না, "onclick"

সমস্ত HTML DOM ঘটনা নিম্নরূপে তালিকাভুক্ত:

HTML DOM Event ওয়ার্ড হ্যান্ডবুক
function

অপরিহার্য।ঘটনা ঘটলে চালু হওয়া ফাংশন

ইভেন্ট ঘটলে, ফাংশনের প্রথম পারামিটার হিসাবে ইভেন্ট অবজেক্ট পাঠানো হবে।

ইভেন্ট অবজেক্টের ধরন নির্দিষ্ট ইভেন্টের উপর নির্ভর করে। উদাহরণস্বরূপ, "click" ইভেন্টটি MouseEvent অবজেক্টের অন্তর্গত।
capture

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

  • true - হ্যান্ডলারটি হ্যান্ডলিং পর্যায়ে কাজ করে
  • false - হ্যান্ডলারটি বালবোতম পর্যায়ে কাজ করে

ফলাফল

ন্যূনতম

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

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

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

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

যখন Node.cloneNode() পদ্ধতি বা Document.importNode() পদ্ধতিটি ডকুমেন্ট নোডের কপি করার সময়, মৌলিক নোডের জন্য নথিভুক্ত ইভেন্ট লিস্টেনারগুলি কপি করে না。

এই পদ্ধতিটি Document ও Window অবজেক্টের উপরও নির্বাচিত হয়, এবং কাজকর্মটি একইভাবে কাজ করে。

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

document.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 ইভেন্ট তালিকা