تصف هذه المقالة نموذج التقاط الحدث ونموذج الفقاعة في JS. شاركه للرجوع إليه.
طريقة التنفيذ المحددة هي كما يلي:
مثال 1:
انسخ الرمز كما يلي: <html>
<head>
<script type = "text/javaScript">
window.onload = function () {
document.getElementById ('par'). addeventListener ('click' ، function () {Alert ('par') ؛} ، true) ؛
document.getElementById ('son'). addeventListener ('click' ، function () {Alert ('son') ؛} ، true) ؛
}
</script>
<type type = "text/css">
#par {العرض: 300px ؛ الارتفاع: 200 بكسل ؛ الخلفية: رمادي ؛}
#son {Width: 200px ؛ الارتفاع: 100px ؛ الخلفية: Green ؛}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </viv>
</div>
</body>
</html>
مثال 2:
انسخ الرمز كما يلي: <html>
<head>
<script type = "text/javaScript">
window.onload = function () {
document.getElementById ('par'). addeventListener ('click' ، function () {Alert ('par') ؛}) ؛
document.getElementById ('son'). addeventListener ('click' ، function () {Alert ('son') ؛}) ؛
}
</script>
<type type = "text/css">
#par {العرض: 300px ؛ الارتفاع: 200 بكسل ؛ الخلفية: رمادي ؛}
#son {Width: 200px ؛ الارتفاع: 100px ؛ الخلفية: Green ؛}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </viv>
</div>
</body>
</html>
AddEventListener: المعلمة الثالثة هي معلمة اختيارية ، وهي خاطئة بشكل افتراضي ، تشير إلى نموذج الفقاعة ، أي أن أصغر طبقة يتم تشغيلها أولاً (Div with Id Is Son) ؛ وإذا تمت إضافة المعلمة الحقيقية ، فهذا يعني أنه نموذج الالتقاط (من HTML-> Body ---> Div) ، مما يؤدي إلى هذا المستوى.
رمز HTML للمثال 1 يحتوي على اثنين من divs. يضم Div الصغير في Div الكبير. عند النقر على Div الصغيرة ، سيتم أولاً تشغيل حدث التنبيه ("Par") ؛ ثم يتم تشغيل القطعة بأكملها في حالة تأهب. مثال 2 هو عكس ذلك بالضبط.
إذا تم استخدام سمة "Object.onclick" لتشغيل الحدث ، فسيتم استخدام نموذج الفقاعة.
IE لا يدعم AddEventListener ، ولكنه يستخدم Attannevent. لكن المرفق لا يدعم المعلمة الثالثة ، فهو لا يلتقط النموذج.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.