জাভাস্ক্রিপ্টে ইভেন্ট বাবলিং vs ইভেন্ট ক্যাপচারিং

ইভেন্ট প্রোপেগেশন: বাবলিং এবং ক্যাপচারিং

ইভেন্ট বাবলিং: ইভেন্ট হলে হ্যান্ডলার প্রথম চাইল্ডে রান করে, তারপর পেরেন্টে, এবং এভাবে সব অ্যানসেস্টর পর্যন্ত।

ইভেন্ট ক্যাপচারিং: বাবলিং-এর বিপরীত। ইভেন্ট পেরেন্ট থেকে শুরু হয়ে চাইল্ডে আসে। `addEventListener`-এর তৃতীয় প্যারামিটার `true` দিয়ে সক্ষম করা হয়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; }
        .outer { display: inline-block; width: 400px; height: 200px; font-size: 20px; background-color: chartreuse; }
        .inner { width: 200px; height: 100px; font-size: 20px; background-color: blueviolet; text-align: center; margin: 20px; }
        .tags { display: inline-block; width: 400px; font-weight: bold; font-size: 18px; }
    </style>
</head>
<body>
    <h1>ইভেন্ট বাবলিং vs ইভেন্ট ক্যাপচারিং</h1>
    <div class="outer"> OUTER <div class="inner">INNER</div> </div>
    <div class="outer"> OUTER <div class="inner">INNER</div> </div>
    <br />
    <div class="tags">Bubbling</div>
    <div class="tags">Capturing</div>
    <div class="result"></div>
    <script>
        let outerDiv = document.querySelectorAll(".outer");
        let innerDiv = document.querySelectorAll(".inner");
        let resEle = document.querySelector(".result");
        outerDiv[0].addEventListener("click", () => {
            resEle.innerHTML += "Outer div has been clicked" + "<br>";
        });
        innerDiv[0].addEventListener("click", () => {
            resEle.innerHTML = "";
            resEle.innerHTML += "Inner div has been clicked" + "<br>";
        });
        outerDiv[1].addEventListener("click", () => {
            resEle.innerHTML = "";
            resEle.innerHTML += "Outer div has been clicked" + "<br>";
        }, true);
        innerDiv[1].addEventListener("click", () => {
            resEle.innerHTML += "Inner div has been clicked" + "<br>";
        }, true);
    </script>
</body>
</html>

আউটপুট

প্রথম সেট (বাবলিং): ইনার ক্লিক করলে ইনার → আউটার অর্ডারে। দ্বিতীয় সেট (ক্যাপচারিং): ইনার ক্লিক করলে আউটার → ইনার অর্ডারে।