জাভাস্ক্রিপ্টে ইভেন্ট ক্যাপচারিং (Event Capturing) কী?

ইভেন্ট ক্যাপচারিং

ইভেন্ট ক্যাপচারিং হলো ইভেন্টটি টপ এলিমেন্ট থেকে টার্গেট এলিমেন্টে প্রবাহিত হওয়া। এটি ইভেন্ট বাবলিং-এর বিপরীত, যা টার্গেট এলিমেন্ট থেকে টপ এলিমেন্টে প্রবাহিত হয়।

কোড ব্যাখ্যা

নিচের কোডে, বডি সেকশনে তিনটি div এলিমেন্ট নেওয়া হয়েছে এবং স্টাইল প্রয়োগ করে নেস্টেড করা হয়েছে।

• প্রতিটি div ট্যাগে addEventListener() দিয়ে ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে।
• ইভেন্টটি হলো click ইভেন্ট।
• addEventListener() মেথড ৩টি প্যারামিটার নেয়:
  1. ইভেন্ট টাইপ (এখানে click)
  2. ইভেন্ট হ্যান্ডলার ফাংশন (অ্যালার্ট মেসেজ দেখানোর জন্য)
  3. থার্ড প্যারামিটার হলো phase। এখানে true রাখলে ইভেন্ট ক্যাপচারিং সক্রিয় হয়। false রাখলে ইভেন্ট বাবলিং সক্রিয় হয়।
• ইভেন্ট হ্যান্ডলার ফাংশন getAttribute() দিয়ে ক্লিক করা div-র id ভ্যালু নিয়ে অ্যালার্ট দেখায়।
• সবচেয়ে ভেতরের নেস্টেড ট্যাগ div3-এ ক্লিক করলে, ইভেন্ট ক্যাপচারিং সক্রিয় থাকায় অ্যালার্ট টপ div1 থেকে টার্গেট div3-এ যাবে।
• div2-এ ক্লিক করলে অ্যালার্ট div1 থেকে div2-এ যাবে।

উদাহরণ

<html> <head> 
<style> 
  .divstyle {
    display: table-cell;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
  }
</style> 
</head> 
<body> 
  <div id="div1" class="divstyle"> 
    div1 
    <div id="div2" class="divstyle"> 
      div2 
      <div id="div3" class="divstyle"> div3 </div> 
    </div> 
  </div> 
  <script> 
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
      divs[i].addEventListener("click", clickhandler, true);
    }
    function clickhandler() {
      alert(this.getAttribute("id") + " event got handled");
    }
  </script> 
</body> </html>

আউটপুট

div3-এ ক্লিক করলে অ্যালার্ট সিকোয়েন্স: div1 → div2 → div3

ব্যাখ্যা

addEventListener-র থার্ড প্যারামিটার useCapture। true মানে ক্যাপচারিং ফেজ (টপ-ডাউন), false (ডিফল্ট) মানে বাবলিং ফেজ (বটম-আপ)। মডার্ন ব্রাউজারে ডিফল্ট বাবলিং।