هناك عدة طرق للتعامل مع أحداث جافا سكريبت

هناك ثلاث طرق للتعامل مع أحداث JavaScript: 1. معالج أحداث HTML، أضف معالج الأحداث مباشرة إلى كود HTML، بناء الجملة هو "<element events=event function...>"؛ 2. معالج الأحداث على مستوى DOM0، لـ كائن محدد لإضافة معالجة الأحداث، يكون بناء الجملة هو "element object.event=function(){...}"; 3. تتم إضافة معالجات الأحداث على مستوى DOM2 أيضًا إلى كائنات محددة وتستخدم بشكل أساسي للتعامل مع عمليات التحديد والتحديد. حذف معالجات الأحداث.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار JavaScript 1.8.5، كمبيوتر Dell G3.

هناك عدة طرق للتعامل مع أحداث جافا سكريبت

3 طرق لاستخدام معالجات أحداث جافا سكريبت

عند وقوع حدث ما، يتعين علينا التعامل معه. هناك ثلاث طرق رئيسية لمعالجات أحداث Javascript:

1. معالج أحداث HTML

أي أننا نضيف معالجات الأحداث مباشرة في كود HTML، مثل الكود التالي:

<input id = "btn" value = "Button" type = "button" onclick = "showmsg ()؛"> <script> function showmsg () { تنبيه ("تمت إضافة معالجة الأحداث بتنسيق HTML") } </script>

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

2. معالج أحداث DOM من المستوى 0

لإضافة معالجة الأحداث للكائن المحدد، انظر إلى الجزء التالي من التعليمات البرمجية:

<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); } btn.onclick=null;// إذا كنت تريد حذف حدث النقر لـ btn، فما عليك سوى تعيينه على قيمة خالية</script>

من الكود أعلاه، يمكننا أن نرى أنه بالمقارنة مع معالجات أحداث HTML، وأحداث DOM من المستوى 0، فقد تم تقليل الاقتران بين كود HTML ورمز js بشكل كبير. ومع ذلك، لا يزال المبرمجون الأذكياء غير راضين ويأملون في إيجاد طريقة أبسط للتعامل معها.

3. معالج الأحداث على مستوى DOM2

يضيف DOM2 أيضًا معالجات الأحداث إلى كائنات محددة، ولكنه يتضمن بشكل أساسي طريقتين للتعامل مع عمليات تحديد معالجات الأحداث وإزالتها: addEventListener() وremoveEventListener(). يتلقون جميعًا ثلاث معلمات: اسم الحدث الذي سيتم التعامل معه، والوظيفة كمعالج للحدث، وقيمة منطقية (سواء كان سيتم التعامل مع الحدث في مرحلة الالتقاط)، انظر إلى الجزء التالي من التعليمات البرمجية:

<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); يتم تعيين القيمة الأخيرة على خطأ، أي أنه لن تتم معالجتها في مرحلة الالتقاط، بشكل عام، تتمتع معالجة الفقاعات بتوافق أفضل في المتصفحات المختلفة function showmsg(){ تنبيه("معالج الحدث المضاف على مستوى DOM" } btn.removeEventListener ("click",showmsg,false);// إذا كنت تريد حذف هذا الحدث، فما عليك سوى تمرير نفس المعلمات</script>

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

قم بتوسيع معرفتك:

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

1. حدث محتدما

يعني فقاعات الحدث أن الحدث يتم استقباله مبدئيًا بواسطة العنصر الأكثر تحديدًا (العقدة ذات مستوى التداخل الأعمق في المستند)، ثم ينتشر لأعلى إلى العقدة الأقل تحديدًا (المستند). التقط الصورة أعلاه للتوضيح، عند النقر على جزء النص، يتم استلامه أولاً بواسطة العنصر الموجود في النص، ثم يتم نشره إلى النافذة خطوة بخطوة، أي عملية 6-7-8-9-10 يتم تنفيذه.

2. التقاط الحدث

التقاط الحدث يعني أن العقدة الأقل تحديدًا ستستقبل الحدث أولاً، وتستقبل العقدة الأكثر تحديدًا الحدث أخيرًا. وبالمثل، في النموذج أعلاه، عند النقر على جزء النص، يتم استقباله أولاً بواسطة النافذة ثم يتم نشره إلى عنصر النص خطوة بخطوة، أي يتم تنفيذ العملية 1-2-3-4-5.