جافا سكريبت HTML DOM EventListener
addEventListener) طريقة (
أمثلة
الاستماع إلى الأحداث اندلعت عندما يقوم المستخدم بالنقر فوق الزر:
محاولة »
ويستخدم أسلوب addEventListener () لإضافة معالج أحداث لعنصر محدد.
addEventListener () طريقة لإضافة معالج الحدث لا تقوم بالكتابة فوق معالج الأحداث الحالية.
يمكنك إضافة معالجات الحدث متعددة لعنصر واحد.
يمكنك إضافة أكثر من واحد من نفس النوع من معالج الحدث لنفس العنصر، مثل: اثنين من "فوق" الحدث.
يمكنك إضافة الكائنات إلى أي مستمع الحدث DOM، وليس فقط عناصر HTML. مثل: إطار الكائن.
طريقة addEventListener () يمكن التحكم بسهولة أكبر حدث (محتدما والقبض).
عند استخدام الأسلوب addEventListener ()، وجافا سكريبت HTML العلامات من اليسار إلى نحت، أكثر قابلية للقراءة، في حالة عدم وجود علامات تحكم HTML يمكن أيضا إضافة المستمعين الحدث.
يمكنك استخدام الأسلوب removeEventListener () لإزالة المستمع الحدث.
قواعد
المعلمة الأولى هي نوع (مثل "فوق" أو "mousedown") الحدث.
والحجة الثانية هي يتم تشغيل استدعاء دالة بعد وقوع الحدث.
المعلمة الثالثة هي قيمة منطقية التي يتم استخدامها لوصف محتدما الحدث أو القبض عليه. هذه المعلمة اختيارية.
 | ملاحظة: لا تستخدم "على" البادئة. على سبيل المثال، استخدام "فوق"، بدلا من "عند _ النقر". |
|---|
العناصر الأصلية إضافة معالج الحدث
أمثلة
عندما ينقر المستخدم على عنصر المنبثقة عندما "مرحبا العالم!"
محاولة »
يمكنك استخدام اسم الدالة على مرجع وظيفة الخارجية:
أمثلة
عندما ينقر المستخدم على عنصر المنبثقة عندما "مرحبا العالم!"
myFunction وظيفة () {
في حالة تأهب ( "مرحبا أيها العالم!")؛
}
محاولة »
إضافة معالجات الحدث متعددة لنفس العنصر
addEventListener طريقة () يسمح لك بإضافة أحداث متعددة لنفس العناصر، وليس الكتابة الأحداث الحالية:
أمثلة
عنصر .addEventListener ( "فوق"، mySecondFunction )؛
محاولة »
يمكنك إضافة إلى نفس العناصر في أنواع مختلفة من الأحداث:
أمثلة
عنصر .addEventListener ( "فوق"، mySecondFunction )؛
عنصر .addEventListener ( "mouseout"، myThirdFunction )؛
محاولة »
إضافة معالج أحداث إلى كائن النافذة
طريقة addEventListener () يسمح لك لإضافة كائنات في المستمع الحدث HTML DOM، كائنات HTML DOM مثل: عناصر HTML، مستندات HTML، الكائن الإطار. كائنات الحدث أو مصاريف أخرى مثل: كائن مدعوم.
أمثلة
عندما يعيد المستخدم حجم نافذة لإضافة المستمعين الحدث:
. document.getElementById ( "التجريبي") HTML داخلي = sometext.
})؛
محاولة »
يمر المعلمات
عند تمرير قيمة معلمة، استخدم استدعاء دالة مع المعلمات "وظيفة مجهول":
القبض على الحدث أو الحدث السطح؟
تسليم الحدث بطريقتين: محتدما والقبض عليه.
ترتيب تسليم الحدث من العناصر المحددة الزناد الحدث. إذا كنت <ص> عنصر في <div> العنصر، عنصر ينقر المستخدم <ص>، الذي عنصر من عناصر الحدث "فوق" إلى أن تسبب ذلك؟
محتدما، سيكون الحدث يتم تشغيل عنصر داخلي، ثم تحريك العناصر الخارجية، وهي: يتم تشغيل الحدث فوق <ص> عنصر أولا، ثم يطلق الحدث انقر فوق <div> العنصر.
في الالتقاط، سيكون الحدث يتم تشغيل عنصر خارجي، العناصر الداخلية ثم الحدث يتم تشغيل، وهي: العنصر <div> لتحريك الحدث انقر فوق، ثم تشغيل حدث فوق <ص> العنصر.
addEventListener () طريقة لتحديد "useCapture" المعلمة لتعيين نوع التسليم:
القيمة الافتراضية هي كاذبة، وهذا هو السطح لتمرير، عندما تكون القيمة الحقيقية، استخدام الحدث للقبض على نقل.
removeEventListener) طريقة (
removeEventListener () طريقة لإزالة طريقة addEventListener () لإضافة معالجات الأحداث:
دعم المتصفح
الأرقام الواردة في الجدول تمثل أول متصفح لدعم عدد طريقة إصدار.
| الطريق | |||||
|---|---|---|---|---|---|
| addEventListener () | 1.0 | تسعة | 1.0 | 1.0 | 7.0 |
| removeEventListener () | 1.0 | تسعة | 1.0 | 1.0 | 7.0 |
ملاحظة: IE 8 والإصدارات السابقة من إنترنت إكسبلورر، أوبرا 7.0 والإصدارات السابقة لا تدعم طريقة addEventListener () وremoveEventListener (). ومع ذلك، فإن هذا النوع من إصدار المستعرض يمكن استخدام طريقة detachEvent () لإزالة معالج الحدث:
element.detachEvent (الحدث، وظيفة)؛
أمثلة
حل عبر متصفح:
إذا (x.addEventListener) {// جميع المتصفحات الرئيسية، باستثناء IE 8 والإصدارات السابقة
x.addEventListener ( "فوق"، myFunction)؛
} آخر إذا (x.attachEvent) {// IE 8 والإصدارات السابقة
x.attachEvent ( "عند _ النقر"، myFunction)؛
}
محاولة »
HTML DOM الحدث كائن المرجعي
كل الأحداث HTML DOM، يمكنك ان ترى لدينا كاملة HTML DOM الحدث كائن المرجعي .