ما هي أفضل طريقة لإضافة حدث في جافا سكريبت ؟

https://stackoverflow.com/questions/34126

09-06-2019
|

سؤال

أرى 2 طرق رئيسية إلى مجموعة الأحداث في جافا سكريبت:

إضافة الحدث مباشرة داخل الوسم مثل هذا:

<a href="" onclick="doFoo()">do foo</a>
مجموعة منهم من خلال جافا سكريبت مثل هذا:

<a id="bar" href="">do bar</a>

و إضافة حدث في <script> القسم داخل <head> القسم أو في ملف جافا سكريبت خارجي ، مثل أنه إذا كنت تستخدم prototypeJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

أعتقد أن الطريقة الأولى هي الأسهل قراءة وصيانة (لأن جافا سكريبت العمل مباشرة لا بد أن الرابط) ولكنها ليست نظيفة جدا (لأنه لا يمكن للمستخدمين النقر على الرابط حتى إذا كانت الصفحة ليست محملة بالكامل ، مما قد يسبب أخطاء جافا سكريبت في بعض الحالات).

الطريقة الثانية هي الأنظف (الإجراءات وأضاف عندما يتم تحميل الصفحة بالكامل) ولكن من الصعب أن تعرف أن هذا العمل هو مرتبط الوسم.

الأسلوب الذي هو أفضل ؟

قاتل الجواب سوف يكون موضع تقدير كامل!

المحلول

في تجربتي, هناك اثنين من النقاط الرئيسية لهذا:

1) أهم شيء هو أن تكون متسقة.أنا لا أعتقد أي من الطريقتين هو بالضرورة أسهل للقراءة ، طالما كنت عصا على ذلك.أنا فقط الحصول على الخلط عند كل الأساليب المستخدمة في مشروع (أو أسوأ من ذلك في نفس الصفحة) لأن ثم عليك أن تبدأ في البحث عن المكالمات و لا على الفور تعرف أن ننظر فيها.

2) النوع الثاني ، أي Event.observe() مزاياه عند نفسه أو مشابهة جدا البت في أحداث متعددة لأن هذا يصبح واضحا عندما تكون جميع تلك المكالمات في نفس المكان.كما كونراد أشار في بعض الحالات يمكن أن يكون هذا التعامل مع مكالمة واحدة.

نصائح أخرى

أعتقد أن الطريقة الأولى هي الأسهل قراءة والحفاظ على

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

معلنا جميع الأحداث في مكان مركزي واحد يساعد على تنظيم الإجراءات التي تجري على الموقع.إذا كنت بحاجة إلى تغيير شيء ما لم يكن لديك للبحث عن كافة أماكن إجراء مكالمة إلى وظيفة ، عليك ببساطة إلى تغيير في مكان واحد.عند إضافة المزيد من العناصر التي ينبغي أن تكون له نفس الوظائف لم يكن لديك أن نتذكر لإضافة معالجات لهم ؛ بدلا من ذلك, أنه في كثير من الأحيان بما فيه الكفاية للسماح لهم إعلان الدرجة ، أو حتى عدم تغييرها على الإطلاق لأنها منطقيا تنتمي إلى حاوية عنصر من عناصر الطفل على سلكية إلى العمل.من الرمز الفعلي:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

هذا السلكية معالج الحدث إلى كل رؤوس الأعمدة في الجدول لجعل الجدول للفرز.تخيل الجهد لجعل جميع رؤوس الأعمدة للفرز على حدة.

أعتقد أن الأسلوب الثاني هو المفضل عموما لأنها تحافظ المعلومات حول العمل (أيجافا سكريبت) منفصلة من العلامات في نفس الطريق المغلق يفصل عرض من العلامات.

أوافق على أن هذا يجعل الأمر أكثر صعوبة لمعرفة ما يحدث في الصفحة الخاصة بك, ولكن أدوات جيدة مثل الحرائق سوف تساعدك مع هذا الكثير.سوف تجد أيضا الكثير من أفضل IDE الدعم المتاحة إذا كنت تحتفظ خلط HTML و جافا سكريبت إلى الحد الأدنى.

هذا النهج يأتي حقا في المشروع الخاص ينمو ، و تجد أنك تريد أن نعلق نفس جافا سكريبت الحدث إلى مجموعة من مختلف أنواع العناصر على العديد من صفحات مختلفة.في هذه الحالة يصبح من الأسهل بكثير أن يكون واحد الوتيرة التي تعلق الأحداث بدلا من الاضطرار إلى البحث المختلفة العديد من ملفات HTML إلى حيث تجد وظيفة معينة تسمى.

يمكنك أيضا استخدام addEventListener (ليس في IE) / attachEvent (في IE).

تحقق من: http://www.quirksmode.org/js/events_advanced.html

هذا يسمح لك إرفاق وظيفة (أو عدة وظائف) إلى الحدث على حالي دوم الكائن.لديهم أيضا ميزة السماح للأمم المتحدة التعلق في وقت لاحق.

بشكل عام, إذا كنت تستخدم كمية خطيرة من جافا سكريبت ، فإنه يمكن أن تكون مفيدة لجعل الخاص بك جافا سكريبت للقراءة, بدلا من html الخاص بك.لذلك يمكن أن نقول أن onclick=X في html واضح جدا ، ولكن هذا هو على حد سواء عدم الفصل بين رمز آخر النحوية التبعية بين القطع-و الحالة التي يجب عليك قراءة كل من html و جافا سكريبت لفهم السلوك الديناميكي من الصفحة.

بلدي تفضيل شخصي هو استخدام مسج في الخارجية js الملفات حتى js منفصلة تماما عن html.جافا سكريبت يجب أن تكون مزعجة جدا مضمنة (أي المثال الأول) ليس الخيار الأفضل في رأيي.عندما تبحث في html فقط علامة على أن كنت تستخدم شبيبة يجب أن يتضمن البرنامج النصي في الرأس.

مثال على ربط (المناولة) من الأحداث قد يكون شيئا من هذا القبيل

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

وأعتقد أن هذا النهج هو مفيد إذا كنت تريد أن تبقي كل من شبيبة المنظمة ، كما يمكنك استخدام كائنات محددة المهام و كل شيء هو لطيف الواردة.

بالطبع فائدة كبيرة من ترك مسج (أو أخرى معروفة المكتبة) للقيام بهذا العمل الشاق هو أن الدعم عبر متصفح هو (إلى حد كبير) العناية مما يجعل الحياة أسهل بكثير

المكتبات مثل يوي و مسج توفر أساليب لإضافة الأحداث مرة واحدة فقط DOM جاهز ، والتي يمكن أن تكون قبل النافذة.onload.كما تأكد من أنه يمكنك إضافة معالجات الأحداث متعددة بحيث يمكنك استخدام البرامج النصية من مصادر مختلفة بدون مختلفة معالجات الأحداث الكتابة فوق بعضها البعض.

لذلك العملية الخاصة بك من الخيارات ؛

واحد.إذا كان البرنامج النصي الخاص بك هو بسيط واحد فقط من أي وقت مضى وسوف تعمل على الصفحة إنشاء الحرف الأول وظيفة مثل ذلك:

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

اثنين.إذا كان لديك العديد من البرامج النصية أو خطة المزج النصوص من مصادر مختلفة, استخدام المكتبة و onDOMReady طريقة بأمان إضافة معالجات الأحداث

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow