به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Event Propagation در جاوا اسکریپت بپردازیم.با ما همراه باشید.

Event Propagation چیست؟

Event propagation مکانیزمی است که نحوه انتشار یا حرکت رویدادها را از طریق درخت DOM برای رسیدن به هدف خود و آنچه پس از آن برای آن اتفاق می‌افتد را تعریف مینماید.

بیایید اینو به کمک یک مثال درک کنیم، فرض کنید یک ایونت هندلر کلیک را روی یک لینک(عنصر <a>) که در داخل یک پاراگراف (عنصر <p>) که تودرتو است، اختصاص داده اید.حالا اگر روی آن لینک کلیک کنید، هندلر اجرا می شود.اما، به‌جای لینک، اگر ایونت هندلر کلیک را به پاراگراف حاوی لینک اختصاص دهید، حتی در این مورد نیز کلیک روی لینک همچنان کنترل‌کننده را فعال می‌کند.این به این دلیل می باشدکه رویدادها فقط بر عنصر مورد نظری که رویداد را ایجاد کرده است تأثیر نمی‌گذارند، بلکه از درخت DOM بالا و پایین می‌روند تا به هدف خود برسند.که این به عنوان انتشار رویداد یا همان event propagation شناخته می شود.

در مرورگر مدرن،event propagation( انتشار رویداد) در دو مرحله انجام می شود:

capturing
bubbling

قبل از اینکه ادامه دهیم، به تصویر زیر نگاهی بیندازید:

تصویر بالا نشان می دهد که چگونه رویداد در درخت DOM در طول مراحل مختلف انتشار رویداد، زمانی که یک رویداد روی عنصری که دارای عناصر والد است اجرا می شود، حرکت می کند.

مفهوم انتشار رویداد برای مقابله با موقعیت‌هایی معرفی شد که در آن چندین عنصر در سلسله مراتب DOM با یک رابطه والد-فرزندی دارای کنترل‌کننده‌های رویداد برای همان رویداد هستند، مانند کلیک ماوس. حال، سوال این است که وقتی کاربر روی عنصر داخلی کلیک می‌کند، رویداد کلیک کدام عنصر ابتدا هندل می‌شود؟رویداد کلیک عنصر بیرونی یا عنصر داخلی؟

در بخش‌های بعدی این مقاله، هر مرحله از انتشار رویداد را با جزئیات بیشتری مورد بحث قرار خواهیم داد و پاسخ این سؤال را خواهیم یافت.

توجه: به طور رسمی 3 فاز، capture، target و فاز bubble وجود دارد. اما، فاز دوم یعنی مرحله capture(زمانی رخ می دهد که رویداد به عنصر هدفی که رویداد را ایجاد کرده می رسد) به طور جداگانه در مرورگرهای مدرن مدیریت نمی شود، کنترل کننده هایی که برای هر دو فاز capturing و bubbling ثبت شده اند در این مرحله اجرا می شوند.

The Capturing Phase

در مرحله capturing ، رویدادها از window به پایین از طریق درخت DOM به گره هدف انتشار می یابند.به عنوان مثال، اگر کاربر روی یک لینک کلیک کند، آن رویداد کلیک از عنصر <html>، عنصر <body> و عنصر <p> حاوی پیوند عبور می کند.

همچنین اگر هر یک از اجداد (یعنی والد، پدربزرگ و …) عنصر هدف و خود هدف یک capturing event listener ثبت شده ویژه برای آن نوع رویداد دارد.در این مرحله اجرا می شوند.بیایید مثال زیر را بررسی نماییم:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Capturing Demo</title>
<style type="text/css">
    div, p, a{
        padding: 15px 30px;
        display: block;
        border: 2px solid #000;
        background: #fff;
    }
</style>
</head>
<body>
<div id="wrap">DIV
    <p class="hint">P
        <a href="#">A</a>
    </p>
</div>

<script>
    function showTagName() {
        alert("Capturing: "+ this.tagName);
    }
    
    var elems = document.querySelectorAll("div, p, a");
    for(let elem of elems) {
        elem.addEventListener("click", showTagName, true);
    }
</script>
</body>
</html>

لازم به ذکر است event capturing در همه مرورگرها پشتیبانی نمی شود و به ندرت استفاده می شود. به عنوان مثال، اینترنت اکسپلورر قبل از نسخه 9.0 از event capturingپشتیبانی نمی کند.

همچنین، event capturing فقط با ایونت هندلرهای ثبت شده در متد () addEventListener آن هم زمانیکه آرگومان سوم true ثبت شده باشد.متد سنتی تخصیصایونت هندلرها، مانند استفاده از onclick, onmouseover, r و غیره در اینجا کار نمی کند.

The Bubbling Phase

در فاز bubbling ، دقیقا برعکس اتفاق می افتد.در این مرحله، رویداد از درخت DOM، از عنصر هدف تا window، انتشار میابد و تمام اجداد المنت تارگت را یکی یکی بازدید می‌کنند.برای مثال، اگر کاربر روی یک لینک کلیک کند، آن رویداد کلیک از عنصر <p>حاوی لینک، عنصر <body> ، عنصر <html> و نودdocument عبور می‌کند.

همچنین، اگر یکی از اجداد عنصر هدف و خود هدف دارای کنترل‌کننده‌هایی باشد که برای آن نوع رویداد اختصاص داده شده است، آن دسته‌ از نودها در این مرحله اجرا می‌شوند.در مرورگرهای مدرن،برای همه کنترل کننده های رویداد به طور پیش فرض فاز bubbling ثبت شده است.

به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Event Bubbling Demo</title>
<style type="text/css">
    div, p, a{
        padding: 15px 30px;
        display: block;
        border: 2px solid #000;
        background: #fff;
    }
</style>
</head>
<body>
<div onclick="alert('Bubbling: ' + this.tagName)">DIV
    <p onclick="alert('Bubbling: ' + this.tagName)">P
        <a href="#" onclick="alert('Bubbling: ' + this.tagName)">A</a>
    </p>
</div>
</body>
</html>

Event bubbling در همه مرورگرها پشتیبانی می‌شود و برای همه کنترل‌کننده‌ها، صرف‌نظر از نحوه ثبت آن‌ها کار می‌کند. ، به عنوان مثال، با استفاده از onclick یا()addEventListener به همین دلیل است که اصطلاح انتشار رویداد اغلب به عنوان مترادف حباب رویداد استفاده می شود.

به همین دلیل است که اصطلاح event propagation اغلب به عنوان مترادف event bubbling استفاده می شود.

Preventing the Default Action

برخی از رویدادها دارای یک عمل پیش فرض مرتبط با آنها هستند. به عنوان مثال، اگر روی یک پیوند کلیک کنید، شما را به تارگت پیوند می‌برد، وقتی روی دکمه ارسال فرم کلیک می‌کنید، مرورگر فرم را ارسال میکند و …شما می توانید با متد ()preventDefault شی رویداد ، از چنین اقدامات پیش فرضی جلوگیری کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Prevent Default Demo</title>
</head>
<body>
<form action="/examples/html/action.php" method="post" id="users">
    <label>First Name:</label>
    <input type="text" name="first-name" id="firstName">
    <input type="submit" value="Submit" id="submitBtn">
</form>

<script>
    var btn = document.getElementById("submitBtn");
    
    btn.addEventListener("click", function(event) {
        var name = document.getElementById("firstName").value;
        alert("Sorry, " + name + ". The preventDefault() won't let you submit this form!");
        event.preventDefault(); // Prevent form submission
    });
</script>
</body>
</html>

خب دوستان گرامی به پایان جلسه Event Propagation در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایر مقالات:

Event Listener در جاوا اسکریپت

عملیات ریاضی در جاوا اسکریپت