addEventListener পদ্ধতি

addEventListener পদ্ধতি একটি উপাদানের উপর ইভেন্ট হ্যান্ডলার নিয়োগ করতে দেয়। এর সাহায্যে, উদাহরণস্বরূপ, নির্দিষ্ট করা যায় যে একটি বাটনে ক্লিক করলে কি করতে হবে বা একটি টেক্সট ফিল্ডে টেক্সট টাইপ করার সময় কি করতে হবে। প্রথম প্যারামিটারে আমরা ইভেন্টের ধরন নির্দেশ করি, দ্বিতীয়টিতে - সেই ফাংশনটি যা প্রথম প্যারামিটারে নির্দিষ্ট ইভেন্ট ঘটার পরে কার্যকর হবে। তৃতীয় ঐচ্ছিক প্যারামিটারে আমরা অবজেক্টের বৈশিষ্ট্য (once, capture, passive) বা useCapture প্যারামিটার পাঠাই।

সিনট্যাক্স

element.addEventListener('event type', function, [options]);
অথবা
element.addEventListener('event type', function, [useCapture]);

উদাহরণ

আসুন এমন করি যাতে একটি বাটনে ক্লিক করলে একটি বার্তা প্রদর্শিত হয়:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

উদাহরণ

আসুন এমন কোড লিখি যাতে একটি ইনপুট তার ফোকাস হারালে সেই ইনপুটের টেক্সট সহ একটি বার্তা প্রদর্শিত হয়:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

উদাহরণ

আসুন এমন করি যাতে একটি বাটনে ক্লিক করলে বার্তাটি কনসোলে শুধুমাত্র একবার প্রিন্ট হয়। এর জন্য আমরা তৃতীয় প্যারামিটার ব্যবহার করব:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

উদাহরণ

passive প্যারামিটার ইভেন্ট প্রক্রিয়াকরণের সময় event.preventDefault মেথড কল করতে নিষেধ করে। আসুন আগের উদাহরণে event.preventDefault মেথড প্রয়োগ করি, এবং passive প্যারামিটারে true মান নির্দেশ করি:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

কোড এক্সিকিউট হওয়ার পরে আমরা নিম্নলিখিত মেসেজগুলি দেখতে পাব:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

উদাহরণ

useCapture প্যারামিটার true মানে ইভেন্টের বাবলিং দেখায় ভিতরের উপাদান থেকে বাইরের দিকে, false মানে - বাইরের থেকে ভিতরের দিকে। useCapture প্যারামিটার পাঠানোর সময় এর নাম বাদ দেওয়া হয় এবং শুধু true বা false লেখা হয়। আসুন দেখি কিভাবে প্যারেন্ট এবং চাইল্ড এলিমেন্টে ক্লিক করলে ইভেন্টগুলি বাবল হয়:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

আরও দেখুন

removeEventListener মেথড,
যা একটি উপাদান থেকে ইভেন্ট আনবাইন্ড করে