في عملية JavaScript DOM ، ستواجه بالتأكيد أحداث JS Bubling. الحدث الأكثر شيوعًا هو الحدث المنبثق Div كما هو موضح في الشكل
عند النقر فوق الجزء الرمادي ، تختفي النافذة المنبثقة ، والنقر على الجزء الأسود ليس له أي تأثير.
استخدم الكود التالي لتحليل حدث الفقاعات لـ JS
رمز HTML:
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> js bubbling event </title>
<link Rel = "STYLESHEET" href = "style.css">
</head>
<body>
<viv>
<h1> تحليل الأحداث JS Bubble </h1>
<hr>
<viv>
<NUNTER>
انقر لي!
</button>
</div>
</div>
<script>
var box = document.queryselector (". box") ،
btn = document.queryselector (". btn") ؛
box.onclick = function (event) {
تنبيه ("أنا ديف") ؛
}
btn.onclick = function (event) {
تنبيه ("أنا زر") ؛
}
</script>
</body>
</html>
باستخدام أداة المطور الافتراضية لمتصفح Firefox ، يمكن أن يرى العرض ثلاثي الأبعاد بوضوح ترتيب طبقة DIV
توضيح:
عند النقر فوق الزر ، سوف يظهر "أنا A Am A Button" وسيظهر "I Am A Am a Div" ، لأنه سيتم تشغيل حدث الزر أولاً ، ثم سيتم تشغيل الطبقة التالية من حدث Div Click.
إن تشغيل الأحداث هو مبدأ الأول في الأول.
توضيح:
ثم في بعض الأحيان لا نريد أن تؤدي أحداث متعددة إلى ظهور تعارضات ، لذا فإن الحدث له توقف () ؛ طريقة لمنع الفقاعات.
هناك أيضًا طريقة حدث يتم استخدامها أيضًا ، مثل الارتباط. عندما أقوم بالنقر فوق الرابط ، لا أريد القفز ، لذلك أستخدم الحدث. preventDefault () ؛ طريقة
رمز المثال كما يلي
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> js bubbling event </title>
<link Rel = "STYLESHEET" href = "style.css">
</head>
<body>
<viv>
<h1> تحليل الأحداث JS Bubble </h1>
<hr>
<viv>
<NUNTER>
انقر لي!
</button>
<a href = "http://www.liteng.org" id = "link"> أنا الرابط </a>
</div>
</div>
<script>
var box = document.queryselector (". box") ،
btn = document.queryselector (". btn") ؛
box.onclick = function (event) {
تنبيه ("أنا ديف") ؛
}
btn.onclick = function (event) {
تنبيه ("أنا زر") ؛
event.stoppropagation () ؛
}
document.getElementById ('link'). onClick = function (event) {
تنبيه ("أنا رابط") ؛
Event.PreventDefault () ؛
}
/*التمييز بين event.stoppropagation () ؛ و Event.PreventDefault () ؛
السابق يستخدم طريقة STOPPROPAGATION () لمنع الأحداث من الفقاعات.
هذا الأخير هو منع السلوك الافتراضي مثل حظر الارتباطات التشعبية
*/
</script>
</body>
</html>
هل يمكنك فهم حادثة JS الفقاعية تمامًا؟ إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي