القراءات ذات الصلة:
ملخص تعلم حدث JavaScript (V) نوع حدث الماوس في JS
//www.vevb.com/article/86259.htm
ملخص تعلم حدث JavaScript (ط) تدفق الحدث
//www.vevb.com/article/86261.htm
ملخص تعلم الأحداث JavaScript (4) أعضاء الحدث العام (الخصائص والأساليب)
//www.vevb.com/article/86262.htm
ملخص تعلم حدث JavaScript (II) معالج الأحداث JS
//www.vevb.com/article/86264.htm
ملخص تعلم الأحداث JavaScript (III) كائن حدث JS
1. الأعضاء العامون في كائن الحدث
1. الأعضاء العامون في الحدث في دوم
يحتوي كائن الحدث على خصائص وطرق تتعلق بالحدث المحدد الذي أنشأه. أنواع الأحداث التي تم تشغيلها مختلفة ، والخصائص والأساليب المتاحة مختلفة. ومع ذلك ، فإن جميع الأحداث في DOM لديها الأعضاء العامين التاليين.
أ. مقارنة CurrentTarget و Target
داخل معالج الحدث ، يساوي هذا الكائن دائمًا قيمة CurrentTarget ، والهدف يحتوي فقط على الهدف الفعلي للحدث.
على سبيل المثال: يوجد زر على الصفحة ، قم بتسجيل حدث النقر في الجسم (العقدة الأصل للزر). عند النقر فوق الزر ، سيقوم حدث النقر بالفقاعة إلى الجسم للمعالجة.
<Body> <input id = "btn" type = "button" value = "click"/> <script> document.body.onclick = function (event) {console.log ("انقر فوق الحدث المسجل في الجسم") ؛ console.log ("this === event.currentTarget؟"+(this === event.currentTarget)) ؛ // true console.log ("CurrentTarget === Document.body؟"+(event.currentTarget === Document.body)) ؛ // true console.log ('event.target === document.getElementById ("btn")؟ // true} </script> </body>النتيجة الجارية هي:
ب. من خلال سمة النوع ، يمكن التعامل مع أحداث متعددة في وظيفة.
المبدأ: يتم التعامل مع الأحداث المختلفة بشكل مختلف عن طريق اكتشاف سمة الحدث.
على سبيل المثال: حدد وظيفة المعالج للتعامل مع 3 أنواع من الأحداث: انقر ، Mouseover ، Mouseout.
<Body> <input id = "btn" type = "button" value = "click"/> <script> var handler = function (event) {switch (event.type) {case "click: alert (" clicked ") ؛ استراحة؛ Case "Mouseover": event.target.style.backgroundColor = "Pink" ؛ استراحة؛ حالة "mouseout": event.target.style.backgroundColor = "" ؛ }} ؛ var btn = document.getElementById ("btn") ؛ btn.onclick = معالج ؛ btn.onmouseover = معالج ؛ btn.onmouseout = معالج ؛ </script> </body>قم بتشغيل التأثير: انقر فوق الزر وينبثق المربع. عندما يمر الماوس عبر الزر ، يصبح لون الخلفية للزر ورديًا ؛ عندما يغادر الماوس الزر ، يعود لون الخلفية إلى الافتراضي.
ج. مقارنة التوقف عن التوقف () و stopimmediatepropagation ()
نفس الشيء: يمكن استخدام توقف التوقف () و stopimmediatepropagation () لإلغاء المزيد من الأحداث أو فقاعات الأحداث.
مختلف: الفرق بين الاثنين هو أنه عندما يكون للحدث معالجات أحداث متعددة ، يمكن أن يمنع STOPIMMEDIATEPROPAGITAGE () معالج الحدث في وقت لاحق.
على سبيل المثال:
<Body> <input id = "btn" type = "button" value = "click"/> <script> var btn = document.getElementById ("btn") ؛ btn.addeventListener ("Click" ، function (event) {console.log ("buttn انقر فوق الاستماع مرة واحدة") ؛ // event.stoppropagation () ؛ // unfinting effect // event.stopimmediatepropagation () ؛ // intinfance effect} ، false) ؛ BTN.AdDeventListener ("Click" ، function () {console.log ("Button Click تم الاستماع مرتين") ؛} ، false) ؛ document.body.onclick = function (event) {console.log ("body clicked") ؛ } </script> </body>تأثير الجري:
D ، فورم الحدث
قيمة مرحلة الحدث هي 1 في مرحلة الالتقاط ، 2 في المرحلة المستهدفة ، و 3 في مرحلة الفقاعة.
مثال:
<Body> <input id = "btn" type = "button" value = "click"/> <script> var btn = document.getElementById ( هل؟ المعالج ، وقيمة الفرق الحدث هي "+event.eventPhase) ؛} ، خطأ) ؛ document.body.addeventListener ("Click" ، function (event) {console.log ("Body adds معالج الأحداث ، وقيمة الفوق الحدث هي"+event.eventphase) ؛} ، true) ؛ document.body.addeventListener ("Click" ، function (event) "+event.eventPhase) ؛} ، خطأ) ؛ </script>تأثير الجري:
2. الأعضاء العامون في الحدث في IE
تختلف خصائص وأساليب الأحداث في IE من نوع الحدث إلى DOM ، ولكن بعضها من الأعضاء العامين لديهم جميع الكائنات ، ومعظم هؤلاء الأعضاء لديهم خصائص أو أساليب DOM المقابلة.
ما سبق هو المعرفة ذات الصلة بأعضاء العامين (السمات والأساليب) للحدث الذي قدمه لك المحرر (4) وآمل أن يكون مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي!