onClick vs addEventListener

‘onClick’ vs ‘addEventListener’

প্রথম প্রথম DOM Events যখন শিখতে যাই আমরা তখন dom এর events handle করার জন্য অনেক option থাকে হাতের সামনে, যেমনঃ onClick(), addEventListener() ইত্যাদি। এখন beginner দের জন্য এটা খুবই confusing কখন onClick() ব্যবহার করব, আর কখন addEventListener() ব্যবহার করব, তাই না?

Certainly! তাহলে চলুন কিছুটা break down করে দেখি JavaScript এর addEventListener and onClick এর concept কে।

onClick():

onClick() একটা event attribute যেটা তুমি কোনো একটা HTML element এ সরাসরি assign করতে পারবে। যখন একটা HTML element এ click করা হয়, তখন নির্দিষ্ট একটা JavaScript function এ সেটা trigger হয় এবং function টা run হয়। তোমার webpage এর সাথে user এর interactivity বাড়ানোর জন্য এটা খুবই simple এবং straightforward একটা পদ্ধতি, কিন্তু এর একটা সীমাবদ্ধতা আছেঃ একটা HTML element এ তুমি কেবল একটাই onClick() function যুক্ত করতে পারবে, তাহলে একাধিক event listener (যেমনঃ clickevent listener)যুক্ত করতে হলে তখন কি করবে?????

Here’s an example:

HTML:

<button id="myButton">Click me!</button>

JavaScript:

document.getElementById("myButton").onclick = function() {
  alert("Button was clicked!");
};

addEventListener():

addEventListener() function এর system onClick() এর চেয়ে কিছুটা জটিল হলেও এর সাহায্যে একই HTML element এর মধ্যে তুমি একাধিক event listener যুক্ত করতে পারবে এবং কখনো কোনো event listener remove করার দরকার হলে সেটাও সহজে করতে পারবে। This is great for more complex interactions or when you need to handle different events, not just the click event.

Here’s an example:

HTML:

<button id="myButton">Click me!</button>

JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button was clicked using addEventListener!");
});

When to use what:

যখন তুমি কোনো simple একটা sinario নিয়ে কাজ করছো এবং একটি HTML element এর জন্য শুধুমাত্র একটি click event নিয়ে কাজ করতে হবে, তখন onClick() ব্যবহার করা তোমার জন্য better option হবে। এটা খুব quick এবং easy, কিন্তু যখন তুমি অধিক advanced functionality implement করতে যাবে তখন onClick()দিয়ে তুমি সব কিছু handle করতে পারবেনা, অনেক limitation তৈরি হবে।

addEventListener() ব্যবহার করুবে যখন তুমি তোমার event গুলোর উপর আরও বেশি নিয়ন্ত্রণ চাচ্ছ। This is especially useful when you need to handle multiple events on the same element, or when you might need to remove event handlers later. It's a more robust approach that allows for greater flexibility and cleaner code.

Scenario 1: Simple Button Click

একই HTML element এর মধ্যে simply শুধু একটা event handler (যেমনঃ simple button click) যু ক্ত করতে হলে onClick() ব্যবহার করে সহজেই করা যাবে।

HTML:

<button id="myButton1">Click me!</button>

JavaScript (onclick):

document.getElementById("myButton1").onclick = function() {
  alert("Button 1 was clicked using 'onclick'!");
};

Scenario 2: Multiple Event Listeners

একই HTML element এর মধ্যে multiple event handlers যু ক্ত করার প্রয়োজন হলে addEventListener() এর সাহায্যে করতে হবে।

HTML:

<button id="myButton2">Click me too!</button>

JavaScript (addEventListener):

const button2 = document.getElementById("myButton2");

button2.addEventListener("click", function() {
  alert("Button 2 was clicked with addEventListener (Listener 1)!");
});
button2.addEventListener("click", function() {
  alert("Button 2 was clicked with addEventListener (Listener 2)!");
});

Scenario 3: Event Handler Removal

addEventListener() ব্যবহার করতে হবে যখন তোমাকে পরবর্তীতে event handlers remove করতে হবে। এটা onClick() দিয়ে করা possible নয়।

HTML:

<button id="myButton3">Click me and then remove listeners</button>

JavaScript (addEventListener with removal):

const button3 = document.getElementById("myButton3");

function handleClick() {
  alert("Button 3 was clicked!");

  // Remove the event listeners after the first click
  button3.removeEventListener("click", handleClick);
  button3.removeEventListener("click", handleAnotherClick);
}

function handleAnotherClick() {
  alert("This should not show after the first click.");
}

button3.addEventListener("click", handleClick);
button3.addEventListener("click", handleAnotherClick);

In this example, the handleClick() function is removed as an event listener after the first click, so the "This should not show after the first click." alert won't appear on subsequent clicks.

Summary:

• Use onClick() for simple cases যেখানে তোমাকে just simple কোনো একটা action perform করতে হবে।
• Use addEventListener() for more complex scenarios, multiple listeners, এবং যখন তুমি পরবর্তীতে listeners remove করতে চাইবে সেই সব senario তে। সোজা কথা, event গুলোর উপর অনেক বেশি নিয়ন্ত্রন চাইলে অবশ্যই addEventListener()ব্যবহার করতে হবে।

মনে রাখবে, addEventListener() is a more flexible and powerful approach যা wider range of situations (events) handle করতে পারে একসাথে, তাই more robust code করার জন্য সাধারণত এটাই recommand করা হয়।