Javascript حدث مستمعي مقابل الحدث

Question

حسنا، لقد كنت أحاول معرفة ذلك لفترة طويلة الآن وأخيرا وقت التحقيق. كما يوحي العنوان "ما هو الفرق"؟ أعلم أن هذا يعمل بالطريقة التي أريدها.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

ولكن هذا لا، ويعمل مرة واحدة فقط.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

ما أنا غير موجود ... ما هو الفرق؟ أي روابط إلى الموضوع ستكون مفيدة.

كان افتراضي أن المعالج يجب أن يتصرف مثل المستمع لكنه لا. في الواقع، يحتاج المستمع إلى إضافته إلى وظيفة AddLoadevent؟

Answer 1

addEventListener يضيف وظيفة معالج الأحداث إلى الحدث. يمكن أن يكون هناك عدد غير محدود من معالجات الأحداث بهذه الطريقة.

جلسة onxxxxx مجموعات معالج الحدث إلى أن وظيفة واحدة.

من Mozilla Developer Central.:

يسجل AddeventLeserener مستمعا واحدا على هدف واحد. قد يكون هدف الحدث عقدة واحدة في مستند أو المستند نفسه أو نافذة أو XMLHTTPRECEST.

لتسجيل أكثر من مستمعي حدث واحد للهدف، اتصل ب AddeventListEner لنفس الهدف ولكن مع أنواع الأحداث المختلفة أو معلمات التقاط.

ونرى هذا الفصل من نفس المستند لمقارنة القديم onxxxx طريق.

Answer 2

نظرا لأن البرنامج النصي ECMA مرن للغاية في جوهره - السماح بتعيين الوظائف، والطرق ... كل شيء تقريبا ... إلى متغير، وجود وظائف إضافية لإرفاق وظيفة إلى متغير مثل "AddeventListener" هو تصميم سيئ وبعد

لذلك إذا سألتني، سأخبرك أن كل ما أخبرك بيككا، وأنا أتفق تماما، وكذلك:

pixels.onkeydown = updateNode;

هو البيان الطبيعي لغة البرنامج النصي ECMA، و:

pixels.addEventListener("keydown", updateNode, true);

هو ملحق دوم مبالغ فيه لا لزوم لها يخلط بين العديد من المطورين مما يجعلهم يعتقدون أن ما سيحدث إذا قمت بتعيينه مرة واحدة بالطريقة الأولى، وربما يحتمل أن يقوم بعض النصوص الآخر في وقت لاحق بإعداده باستخدام الطريقة الأخرى :)