يجب تشغيل تنفيذ لغة البرمجة النصية JavaScript. النهج العام هو كتابة العديد من الوظائف مباشرة على صفحة الويب. تتم معالجة بعضها بواسطة المتصفح عند تحميل الرمز ، أو استخدام رموز مشابهة لتلك التالية لتشغيل تنفيذ الوظائف المتعلقة بالوظيفة.
<div id = "link" onClick = "fun ()"> </viv>
يعني الرمز أعلاه أنه عندما ينقر الماوس على عنصر يحتوي على ID كرابط ، يتم تشغيل حدث OnClick الخاص به ، ثم يتم تنفيذ وظيفة المرح المحددة باستخدام JavaScript. هذا النهج غير معقول بالتأكيد ، لأن عملية الزناد مكتوبة مباشرة في بنية HTML ، والمحتوى والسلوك غير معزولين ، مما سيؤدي إلى إزعاج للتنمية الثانوية أو التعديلات في المستقبل.
تجدر الإشارة إلى أنه عندما تكون معالجة الأحداث مرتبطة بالعنصر المقابل ، لا يمكن تنفيذ العمليات إلا بعد تحميل هذا العنصر. إذا تم وضع البرنامج النصي المعالج في منطقة الرأس ، فسيقوم المتصفح بالإبلاغ عن خطأ. نظرًا لأنه لم يتم تحميل عنصر HTML التالي بعد ، فقد تمت معالجة البرنامج النصي للمعالجة في الرأس.
يجب أن تكون طريقة جيدة لتنفيذ رمز JavaScript لفصل المحتوى السلوكي ومعالجته بعد تحميل الصفحة. لذلك ، عند التعامل مع رمز JavaScript ، نحتاج إلى استخدام أحداث التحميل للمستمعين وكائنات النوافذ.
المستمع
الوظيفة الفعلية للمستمع هي فصل السلوك عن المحتوى. في الماضي ، كانت هناك حاجة إلى بعض الأحداث التي تؤدي إلى تشغيل وظائف JavaScript ذات الصلة. الآن ، نستخدم مستمعًا مباشرة لعنصر في JavaScript للاستماع إلى أحداث هذا العنصر. إذا تم تشغيل هذا العنصر وتم تعريف وظيفة المعالجة المقابلة لهذا الحدث في المستمع ، فسيتم معالجة هذه الوظيفة.
تسمى الطريقة القياسية لـ W3C AddeventListener ، والتي تدعمها IE9 و Chrome و Firefox و Opera. طريقة الكتابة هي:
window.adDeventListener ('load' ، وظيفة ، خطأ) ؛الطريقة المرفقة في وقت مبكر IE لها آثار مماثلة:
window.attachevent ('Onload' ، function) ؛طريقة استخدام المستمع بسيطة للغاية. هو أولاً الحصول على عنصر في الصفحة ، ثم استخدم مستمعًا لهذا العنصر لتحديد الحدث المستمع ووظيفة معالجة الأحداث المقابلة. على سبيل المثال أعلاه:
document.getElementById ('link'). addeventListener ('click' ، fun ، false) ؛لمزيد من الإرشادات التفصيلية حول استخدام الشاشة ، يرجى الاطلاع على المعلومات التكميلية في نهاية المقالة.
حدث Window.onload
لن يتم تشغيل حدث ONLOAD إلا عندما يتم تحميل الصفحة بأكملها بالكامل. عندما نكتب رمز JavaScript في حدث Onload ، يمكننا التأكد من أن المتصفح سيعالج رمز JavaScript الخاص بنا بعد تحميل عنصر HTML. الكتابة الأساسية:
window.onload = function () {// code}وبهذه الطريقة ، سيتم معالجة الكود في هذه الوظيفة بعد التحميل. ومع ذلك ، فإن هذه الطريقة لها عيب ، وهو أنه لا يمكن استخدامه إلا لهذه الوظيفة. لا يمكن أن تظهر أحداث Window.onload المتعددة على الصفحة. في حالة حدوث أحداث متعددة Onload ، سيقوم المحتوى اللاحق بالكتابة السابقة.
بعد ذلك ، يمكننا القيام بذلك ، وكتابة جميع أسماء الوظائف التي تحتاج إلى تحميل في حدث.
window.onload = function () {func1 () ؛ func2 () ؛ } الدالة func1 () {...} func2 () {...}على الرغم من أن هذا على ما يرام ، إلا أنه غير مريح للغاية لأننا بحاجة إلى كتابة جميع أسماء الوظائف التي سيتم تحميلها ، وسيكون من المقلق للغاية تعديلها. بالطبع ، يجب أن يكون هناك حل. يوفر JQuery طريقة تحميل قوية للغاية متعددة النصوص ، لذلك يجب أن يكون هناك حل لجافا سكريبت الأصلي.
Window.onload يتعامل مع وظائف متعددة في وقت واحد
نحتاج إلى كتابة وظيفة معالجة وننظر إلى الكود أولاً:
وظيفة addLoadListener (fn) {if (typeof window.adDeventListener! = 'undefined') {window.adDeventListener ('load' ، fn ، false) ؛ } آخر إذا (typeof document.addeventListener! = 'undefined') {document.adDeventListener ('load' ، fn ، false) ؛ } آخر إذا (typeof window.attachevent! = 'undefined') {window.attachevent ('Onload' ، fn) ؛ } آخر {var oldfn = window.onload ؛ if (typeof window.onload! = 'function') {window.onload = fn ؛ } آخر {window.onload = function () {oldfn () ؛ fn () ؛ } ؛ }}}دعنا ببساطة تحليل وظيفة AddLoadListener المخصصة ، تمرير اسم الوظيفة كمعلمة. يحدد أولاً ما إذا كان المتصفح يدعم المستمع ذي الصلة. إذا كان يدعم المستمع ، فإنه يستخدم المستمع للاستماع إلى أحداث Onload لكائن النافذة ، ثم يعالج هذه الوظيفة. يستخدم هذا الرمز البيان IF للحكم على أحداث الاستماع في جميع المتصفحات وهو متوافق مع المتصفح.
نضع هذا الرمز في الجزء العلوي من قطاع رمز JavaScript ، ثم نحدد الوظائف ذات الصلة أدناه ، ثم استخدم العبارة التالية لتحميل وظيفة JavaScript.
AddLoadListener (func) ؛ وظيفة func () {...}وبهذه الطريقة ، يجب معالجة أي وظائف JavaScript بعد تحميل الصفحة. يمكنك استخدام وظيفة AddLoadListener مباشرة ، ويمكن استخدام وظائف متعددة. بشكل عام ، من الأفضل تحميل جميع JavaScript باستخدام حدث Onload لتجنب المواقف غير المتوقعة.