English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
توزيع الحدث هو طريقة لوصف "مجموعة الحدث" التي تُشعلها في متصفح الويب.
حدثالتدفقوالاستقبالهما آليةان توزيع الحدث، وتصف حالات حدوث اثنين من معالجات الحدث لنفس نوع الحدث في عنصر واحد.
افترض أنك في<div >العنصر يحتوي على<p>العنصر، وقد ضغط المستخدم على<p>العنصر، يجب معالجة حدث "click" أولاً لعنصر ما؟
<div id="div1">التقاطع
<p id="p1">انقر هنا</p>
</div>
<script>
document.querySelector("#div1").addEventListener("click", myFunc, true);
document.querySelector("#p1").addEventListener("click", myFunc, true);
</script>اختبار النظر في‹/›من خلالcapture(التقاطع)،يتم إلتقاط الحدث أولاً من العنصر الخارجي الأكبر وتنسيقه إلى العناصر الداخلية.
من خلالالتدفق، يتم استقبال الحدث أولاً من العنصر الأدنى المباشر ثم يتم تمريره إلى العناصر الخارجية.
باستخدام هذاaddEventListener()الطريقة، يمكنك استخدام " useCapture 参数 معين يحدد نوع التمرير، ويقوم الشكل النصي أدناه بشرح "useCapture" بشكل مفصل.
element.addEventListener(event, listener, useCapture)
يتم تعيين "useCapture" افتراضياً إلى false، مما يعني استخدام التدفق افتراضياً؛ بينما عند تعيين القيمة إلى true، يتم استخدام تمرير الاستقبال.
تم تقديم مفهوم تمرير الحدث لمعالجة حالة العناصر التي لها علاقة تنسيقية في بنية DOM ولديها معالجات الحدث لمؤتمرات نفس الحدث (مثل، نقر الماوس). الآن، السؤال هو، عند نقر المستخدم على العنصر الداخلي، هل سيتم معالجة حدث النقر على العنصر الخارجي أو العنصر الداخلي؟
عند إطلاق الحدث على العنصر الذي يحتوي على عنصر أب (مثل العنصر في هذا المثال،<p>)، حيث سيقوم المتصفح بتنفيذ مرحلتين مختلفتين - مرحلة الاستقبال ومرحلة التدفق.
فيالاستقبالمرحلة:
سيقوم المتصفح بالتحقق من الأب الأعلى الأقرب للعنصر (<html>هل تم تسجيل معالج الحدث onclick في مرحلة الاستقبال، إذا كان كذلك، يتم تشغيل المعالج.
ثم، ينتقل إلىفي <html>العنصر التالي ويقوم بالعمل نفسه، ثم ينتقل إلى التالي، وهكذا حتى يصل إلى العنصر الذي نقر عليه.
فيالتدفقفي هذه المرحلة، العكس صحيح:
يقوم المتصفح بالتحقق مما إذا كان العنصر الذي نقر عليه في مرحلة التدفق مسجلاً له معالج الحدث onclick، إذا كان كذلك، يتم تشغيل المعالج.
ثم، ينتقل إلى العنصر الأم المباشر التالي، ثم يطبق التالي، وهكذا حتى يصل إلى<html>إلى العنصر.
في المتصفحات الشائعة، بشكل افتراضي، يتم تسجيل جميع معالجات الحدث في مرحلة التدفق.
في مرحلة الاستقبال، يتم تمرير الحدث من Window إلى الأسفل عبر شجرة DOM إلى العنصر المستهدف.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);اختبار النظر في‹/›فقط عندماaddEventListener()عند تعيين الثالثة إلى صحيح، يتم استخدام الاستقبال الحدث فقط مع مدير معالجة الحدث المسجل في الوقت نفسه.
في مرحلة التسرب، العكس صحيح. في هذه المرحلة، يتم انتقال أو تسرب الحدث من العنصر المستهدف إلى Window، حيث يتم انتقال DOM إلى أعلى الشجرة.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);اختبار النظر في‹/›يدعم جميع المتصفحات تفويض الحدث، ويستخدم تفويض الحدث لجميع المعالجات، مهما كان كيفية تسجيلها (مثل onclick أو addEventListener()).
إذا كنت ترغب في منع إبلاغ معالج الحدث للأباء عن الحدث باستخدام طريقة event.stopPropagation()، يمكنك أيضًا إيقاف انتقال الحدث في وسط.
في المثال التالي، إذا تم النقر على العنصر الفرعي، لن يتم تشغيل مستمع الحدث للحدث click على العنصر الأم:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("You clicked: " + this.tagName);
event.stopPropagation();
}اختبار النظر في‹/›العنصر المستهدف هو العنصر DOM الذي تم إنشاؤه الحدث عليه.
على سبيل المثال، إذا قام المستخدم بالنقر على رابط، فإن العنصر المستهدف هو الرابط.
يتم الوصول إلى العنصر المستهدف عبر event.target، ولا يتغير في مرحلة انتقال الحدث.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = " + event.target.tagName);
}اختبار النظر في‹/›بعض الحدثات لها تفاعلات افتراضية مرتبطة بها. على سبيل المثال، إذا قمت بالنقر على رابط في المتصفح، سيقوم المتصفح بنقلك إلى هدف الرابط، عند النقر على زر تقديم استمارة، سيقوم المتصفح بتقديم الاستمارة، وما إلى ذلك. يمكنك استخدام طريقة event.preventDefault() من كائن الحدث لمنع هذه التفاعلات الافتراضية.
function myFunc() {
event.preventDefault();
}اختبار النظر في‹/›لكن منع التفاعل الافتراضي لا يمنع انتقال الحدث؛ ينتشر الحدث كما هو إلى شجرة DOM.
يمنحنا التسرب أيضًا إمكانية استخدام تفويض الحدث.
يستخدم تفويض الحدث لتجنب إضافة مستمع الحدث إلى العنصر المحدد؛ بدلاً من ذلك، يتم إضافة مستمع الحدث إلى العنصر الأم.
المفهوم يعتمد على الحقيقة التالية: إذا كنت ترغب في تشغيل بعض الكود عند النقر على أي عنصر فرعي من مجموعة كبيرة من العناصر، يمكنك تعيين مستمع الحدث على العنصر الأم، مما يجعل الحدث الذي يحدث عليهم ينتقل إلى العنصر الأم، دون الحاجة إلى تعيين مستمع الحدث على كل طفل بشكل منفرد.
في هذا المثال، إذا كنت ترغب في عرض رسالة عند النقر، يمكنك إعداد استماع إلى الحدث click في<ul>إعداد استماع إلى الحدث click، سيقوم بإظهار عنصر القائمة
<ul id="parent-list">
<li id="post-1">العنصر 1</li>
<li id="post-2">العنصر 2</li>
<li id="post-3">العنصر 3</li>
<li id="post-4">العنصر 4</li>
<li id="post-5">العنصر 5</li>
<li id="post-6">العنصر 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("قائمة العنصر " + event.target.id.replace("post-", "") + " تم النقر عليها!");
}
});
</script>اختبار النظر في‹/›