حدث النقر في جافا سكريبت. باستخدام مكتبة jQuery

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

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

الأمر معقد لأن كل تقنية لها نسختان. يمكنك تعيين خاصية معالج الحدث في كود JavaScript أو في عنصر مستند عن طريق تحديد السمة المقابلة مباشرة في علامة HTML. يمكن إجراء تسجيل المعالجات باستدعاء الطريقة من خلال طريقة قياسية تسمى addEventListener()، والتي تدعمها جميع المتصفحات باستثناء إصدارات IE 8 وما دونها، وطريقة أخرى تسمى AttachEvent()، تدعمها جميع إصدارات IE حتى IE9.

إن أبسط طريقة لتسجيل معالج الحدث هي تعيين خاصية هدف الحدث إلى وظيفة المعالج المطلوبة. وفقًا للاتفاقية، تحتوي خصائص معالج الأحداث على أسماء تتكون من الكلمة "on" متبوعة باسم الحدث: onclick، onchange، onload، onmouseover، إلخ. لاحظ أن أسماء الخصائص هذه حساسة لحالة الأحرف وتستخدم الأحرف الصغيرة فقط، حتى عندما يتكون اسم نوع الحدث من كلمات متعددة (على سبيل المثال، "readystatechange"). فيما يلي مثالان لتسجيل معالجات الأحداث:

// قم بتعيين الوظيفة لخاصية التحميل لكائن النافذة. // الوظيفة عبارة عن معالج حدث: يتم استدعاؤها عند تحميل المستند window.onload = function() ( // ابحث عن العنصر var elt = document.getElementById("shipping_address"); // سجل معالج الأحداث الذي سوف يتم استدعاؤه // مباشرة قبل إرسال النموذج elt.onsubmit = function() ( return validate(this; ) )

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

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

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

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

بعض أنواع الأحداث مخصصة للمتصفح ككل، وليس لأي عنصر محدد في المستند. يتم تسجيل معالجات مثل هذه الأحداث في JavaScript في كائن Window. في ترميز HTML، يجب وضعها في علامة، لكن المتصفح سيقوم بتسجيلها في كائن Window. فيما يلي قائمة كاملة بمعالجات الأحداث المحددة في مسودة مواصفات HTML5:

بعد الطباعة على التركيز على الإنترنت عند تغيير الحجم قبل الطباعة على التجزئة التغيير على الصفحة إخفاء على التخزين قبل التفريغ عند التحميل على الصفحةعرض عند التراجع عن التعتيم على الرسالة على البوبالحالة على التفريغ على خطأ في وضع عدم الاتصال على الإعادة

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

في نموذج الحدث القياسي، الذي تدعمه جميع المتصفحات باستثناء الإصدار 8 والإصدارات الأقدم من IE، يمكن أن يكون هدف الحدث هو أي كائن - بما في ذلك كائنات النافذة والمستند وجميع كائنات عناصر عناصر المستند - مع تحديد طريقة تسمى addEventListener() مع أي حدث يمكن تسجيل معالجات لهذا الغرض.

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

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

يقوم المقتطف التالي بتسجيل معالجي أحداث "النقر" على العنصر. لاحظ الاختلافات بين التقنيتين المستخدمتين:

انقر فوق لي!

var b = document.getElementById("mybutton"); b.onclick = function() ( تنبيه("شكرًا للنقر علي!"); ); b.addEventListener("انقر"، function() (alert("شكرًا مرة أخرى!")), false);

إن استدعاء الأسلوب addEventListener() باستخدام السلسلة "click" كوسيطة أولى لا يؤثر على قيمة خاصية onclick. في المقتطف أعلاه، سيؤدي النقر فوق الزر إلى إظهار مربعي حوار التنبيه (). ولكن الأهم من ذلك هو أنه يمكن استدعاء طريقة addEventListener () عدة مرات ويمكن استخدامها لتسجيل وظائف معالج متعددة لنفس نوع الحدث في نفس الكائن. عند وقوع حدث على كائن، سيتم استدعاء كافة المعالجات المسجلة لهذا النوع من الحدث، بالترتيب الذي تم تسجيلها به.

تقترن طريقة addEventListener () بطريقة RemoveEventListener ()، والتي تأخذ نفس الوسائط الثلاث، ولكن بدلاً من الإضافة، فإنها تزيل وظيفة معالج من الكائن. يكون هذا مفيدًا غالبًا عندما تحتاج إلى تسجيل معالج حدث مؤقت ثم إزالته في وقت ما.

لا تدعم إصدارات Internet Explorer الأقدم من IE9 أساليب addEventListener() وremoveEventListener(). IE5 والإصدارات الأحدث تحدد طرقًا مشابهة، AttachEvent() و detachEvent() . نظرًا لأن نموذج حدث IE لا يدعم مرحلة الاعتراض، فإن أساليب AttachEvent() وdetachEvent() تأخذ وسيطتين فقط: نوع الحدث ووظيفة المعالج، حيث تقوم الوسيطة الأولى بتمرير اسم خاصية المعالج مسبوقًا بـ "on" إلى الأساليب في IE بدلاً من أحداث النوع بدون هذه البادئة.

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

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

في الإصدار 8 والإصدارات الأقدم من IE، لا يتم تمرير معالجات الأحداث المسجلة عن طريق تعيين خاصية كائن حدث عند استدعائها. بدلاً من ذلك، يتم تخزين كائن الحدث في المتغير العام window.event. من أجل قابلية النقل، يمكن تصميم معالجات الأحداث على النحو التالي بحيث تستخدم المتغير window.event عند استدعائها بدون وسيطة:

يتم تمرير كائن الحدث إلى معالجات الأحداث المسجلة باستخدام الأسلوب AttachEvent()، لكن يمكنهم أيضًا استخدام المتغير window.event.

عندما تقوم بتسجيل معالج حدث باستخدام سمة HTML، يقوم المتصفح بتحويل سلسلة من تعليمات JavaScript البرمجية إلى دالة. تقوم المتصفحات الأخرى غير IE بإنشاء دالة ذات وسيطة واحدة، الحدث. يقوم IE بإنشاء دالة لا تأخذ أي وسائط. إذا استخدمت معرف الحدث في مثل هذه الوظائف، فسوف يشير إلى window.event. في كلتا الحالتين، يمكن لمعالجات الأحداث المحددة في ترميز HTML الإشارة إلى كائن حدث باستخدام معرف الحدث.

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

E.onclick = function() ( /* تنفيذ المعالج */ );

لذلك ليس من المستغرب أن يتم استدعاء معالجات الأحداث (مع استثناء واحد فيما يتعلق بـ IE، والذي سيتم وصفه أدناه) كطرق للكائنات التي تم تعريفها فيها. أي أنه في نص معالج الحدث، تشير الكلمة الأساسية this إلى هدف الحدث.

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

/* تسجيل الوظيفة المحددة كمعالج حدث من النوع المحدد في الكائن المحدد. يضمن أنه سيتم دائمًا استدعاء المعالج كأسلوب على الكائن الهدف. */ function addEvent(target, type, Handler) ( if (target.addEventListener) target.addEventListener(type, Handler, false); else target.attachEvent("on" + type, function(event) ( // اتصل بالمعالج كطريقة هدف، // وتمرير كائن الحدث return Handler.call(target, events ));

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

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

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

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

من المهم أن نفهم أن قيم الإرجاع لمعالجات الأحداث لا يتم حسابها إلا إذا تم تسجيل المعالجات عن طريق تعيين الخصائص. يجب على المعالجات المسجلة مع addEventListener() أو AttachEvent() بدلاً من ذلك استدعاء الأسلوب PreventDefault() أو تعيين خاصية returnValue لكائن الحدث.

يمكن استخدام القيمة التي يتم إرجاعها بواسطة معالج الأحداث المسجل كخاصية لتجاوز الإجراءات الافتراضية التي يتخذها المتصفح في حالة وقوع هذا الحدث. في المتصفحات التي تدعم الأسلوب addEventListener()، يمكن أيضًا تجاوز الإجراءات الافتراضية عن طريق استدعاء الأسلوب PreventDefault() الخاص بكائن الحدث. ومع ذلك، في الإصدار 8 والإصدارات الأحدث من IE، يتم تحقيق نفس التأثير عن طريق تعيين خاصية returnValue لكائن الحدث إلى false.

يوضح المقتطف التالي معالج حدث النقر فوق الارتباط التشعبي الذي يستخدم الطرق الثلاثة لإلغاء الحدث (منع المستخدم من اتباع الرابط):

Window.onload = function() ( // البحث عن كافة الروابط var a_href = document.getElementsByTagName("a"); // أضف معالج حدث النقر (ليس لـ IE)

يعرّف مشروع الوحدة النمطية DOM Events 3 الحالي خاصية على كائن الحدث تسمى defaultPrevented . إنه غير مدعوم حتى الآن من قبل جميع المتصفحات، ولكن جوهره هو أنه في الظروف العادية يكون خطأ ويصبح صحيحًا فقط إذا تم استدعاء طريقة منع الافتراضي ().

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

في IE الإصدار 8 وما دونه، طريقة stopPropagation() غير مدعومة. بدلاً من ذلك، يحتوي كائن الحدث في IE على خاصية CancelBubble. يؤدي تعيين هذه الخاصية إلى صحيح إلى منع انتشار الحدث.

تحدد المسودة الحالية لمواصفات DOM Events 3 طريقة أخرى على كائن الحدث، وهي طريقة تسمى stopImmediatePropagation(). مثل التابع stopPropagation()، فهو يمنع الحدث من الانتشار إلى أي كائنات أخرى. ولكن بالإضافة إلى ذلك، فإنه يمنع أيضًا استدعاء أي معالجات أحداث أخرى مسجلة على نفس الكائن.

تحياتي لكل من يريد فهم عمل onclick(). ستساعدك مقالة اليوم على فهم مبدأ تشغيل معالج الأحداث هذا بشكل نهائي وتحليل مثال محدد لجافا سكريبت onclick، أو بالأحرى أمثلة.

سأعرض لك عدة طرق للعمل باستخدام هذه الأداة، وسأشرح مزاياها وعيوبها، وسأصف أيضًا كيفية عمل jQuery مع الأحداث. الآن دعنا ننتقل إلى تحليل المادة!

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

وفقًا لقواعد الكتابة، تقوم جميع المعالجات بتضمين "اسم الحدث+on" في أسمائها، وهو ما تتم ملاحظته في onclick(). اعتمادًا على الحدث المحدد، ستتم المعالجة بسبب إجراءات مختلفة. في حالتنا، عند استخدام onclick()، سيتم تنفيذ الأحداث التي نتجت عن النقر بالماوس الأيسر فقط.

يوجد اليوم العديد من الخيارات لإدخال معالج لأحداث أو أحداث معينة في الكود.

لنبدأ بخيار بسيط، وهو تنفيذ onclick() في ترميز مستند html نفسه. تبدو هكذا:

كما ترون، عند النقر فوق الزر باستخدام زر الماوس الأيسر، تظهر الرسالة "انقر فوق!". أود أن ألفت انتباهكم إلى تفاصيل صغيرة ولكنها مهمة. يمكنك فقط استخدام علامات الاقتباس المفردة ('') داخل التنبيه.

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

اضغط علي

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

هذه الطريقة بلا شك بسيطة للغاية. ومع ذلك، فهي مناسبة فقط لمهام مماثلة، أي. عرض الرسائل أو تنفيذ أوامر بسيطة.

إذا كنت بحاجة إلى استخدام الهياكل الدورية، واستخدام العلامات، وما إلى ذلك، فهذه الطريقة غير مناسبة. سيؤدي ذلك إلى تقليل سهولة قراءة الكود ويجعله ضخمًا وقذرًا.

في هذه الحالة، يجب عليك اللجوء إلى الوظائف.

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

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

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

نتيجة فار =1؛ الدالة countPow(n) ( for(var i=1; i div ( الارتفاع: 12px; الخلفية: أزرق; العرض: 0%; ) الجسم ( الارتفاع: 2000px; )

مرر لي...

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

نستخدم % بدلاً من px كوحدة قياس عند ضبط العرض، بحيث تتغير أبعاد العنصر بشكل متناسب مع حجم شريط التقدم.

يحتوي المتغير العام insideHeight على ارتفاع النافذة، والذي يجب أن نطرحه من إجمالي ارتفاع المستند القابل للتمرير المتاح. لا يمكنك التمرير لأسفل النافذة عندما تصل إلى أسفل المستند. مع ارتفاع الارتفاع الداخلي، يمكن أيضًا استخدام العرض الداخلي. يؤدي قسمة pageYOffset (موضع مربع التمرير الحالي) على الحد الأقصى لموضع التمرير المسموح به والضرب في 100 إلى الحصول على النسبة المئوية لشريط التقدم.

استدعاء PreventDefault في حدث تمرير JavaScript لا يمنع التمرير. يتم استدعاء معالج الحدث فقط بعد حدوث التمرير.

عندما يكون لعنصر ما تركيز إدخال، يطلق المتصفح حدث "التركيز" عليه. عند إزالة تركيز الإدخال، يتم إطلاق الحدث "blur".

هذين الحدثين لا ينتشران. لا يتم إخطار معالج العنصر الأصلي عندما يكون العنصر الفرعي لديه تركيز الإدخال.

يعرض المثال التالي تلميح أداة لحقل النص الذي يركز حاليًا على الإدخال:

اسم:

عمر:

يتلقى كائن window الأحداث "التركيز" و"التمويه" عندما ينتقل المستخدم إلى علامة التبويب أو يغادرها، وهي نافذة المتصفح التي يتم عرض المستند فيها.

عند انتهاء تحميل الصفحة، يتم رفع حدث JavaScript "تحميل" لنص المستند وكائنات النافذة. يتم استخدامه لجدولة تهيئة الإجراءات التي تتطلب تحميل المستند بأكمله. لا تنس أنه يتم إطلاق المحتوى فورًا عند مواجهة هذه العلامة. في بعض الأحيان يكون الوقت مبكرًا جدًا. على سبيل المثال، عندما يحتاج البرنامج النصي إلى القيام بشيء ما مع أجزاء من المستند التي يتم تحميلها بعد ملف .

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

عندما نغلق صفحة أو ننتقل إلى صفحة أخرى (على سبيل المثال، عن طريق النقر على رابط)، يتم إطلاق الحدث "beforeunload". يتم استخدامه لمنع المستخدم من فقدان ما كان يعمل عليه عن طريق الخطأ بعد إغلاق المستند.

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

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

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

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

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

لنفترض أنه في ملف يسمى code/squareworker.js لدينا الكود التالي:

addEventListener("message", function(event) ( postMessage(event.data * events.data); ));

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

var SquareWorker = new Worker("code/squareworker.js"); SquareWorker.addEventListener("message", function(event) ( console.log("استجاب العامل:", events.data); )); SquareWorker.postMessage(10); SquareWorker.postMessage(24);

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

تشبه وظيفة setTimeout وظيفة requestAnimationFrame. فإنه يستدعي وظيفة أخرى سيتم استدعاؤها لاحقا. ولكن بدلاً من استدعاء الوظيفة في المرة التالية التي يتم فيها عرض الصفحة، فإنها تنتظر عددًا معينًا من المللي ثانية. في هذا المثال لحدث JavaScript، تتحول خلفية الصفحة من اللون الأزرق إلى الأصفر بعد ثانيتين:

document.body.style.background = "أزرق"؛ setTimeout(function() ( document.body.style.background = "yellow"; ), 2000);

في بعض الأحيان نحتاج إلى إلغاء وظيفة خططنا لها. يتم ذلك عن طريق تخزين القيمة المرجعة لـ setTimeout واستدعاء ClearTimeout عليها:

var BombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); إذا (الرياضيات العشوائية ()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

تعمل وظيفة CancelAnimationFrame بنفس وظيفة ClearTimeout . يتم استدعاؤه بواسطة القيمة التي يتم إرجاعها بواسطة requestAnimationFrame لإلغاء الإطار (إذا لم يتم استدعاؤه بالفعل).

يتم استخدام مجموعة مماثلة من الوظائف، setInterval وclearInterval لتعيين مؤقت يجب أن يكرر الإجراء كل X مللي ثانية:

فار القراد = 0؛ var Clock = setInterval(function() ( console.log("tick", Ticks++); if (ticks == 10) ( ClearInterval(clock); console.log("stop."); ) ), 200);

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

إذا كنت بحاجة إلى القيام بشيء غير قياسي في مثل هذا المعالج، فيمكنك استخدام setTimeout للتأكد من أن الأمر لا يستغرق وقتًا طويلاً. يُشار إلى هذا عادةً باسم تقسيم الأحداث. هناك عدة طرق مختلفة للسحق.

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

اكتب شيئًا هنا... var textarea = document.querySelector("textarea"); مهلة فار؛ textarea.addEventListener("keydown", function() ( ClearTimeout(timeout); timeout = setTimeout(function() ( console.log("لقد توقفت عن الكتابة."); ), 500); ));

لن يكون لتمرير قيمة غير محددة لـ ClearTimeout أو استدعائها عند تأخير قيد التشغيل بالفعل أي تأثير. لم يعد علينا أن نكون حذرين بشأن متى نسميها، نحن فقط نفعل ذلك لكل حدث.

يمكنك استخدام برنامج نصي مختلف إذا كنت بحاجة إلى فصل الإجابات خلال فترة زمنية قصيرة. لكن في الوقت نفسه، ينبغي إطلاقها خلال سلسلة من الأحداث، وليس بعدها مباشرة. على سبيل المثال، يمكنك إرسال إحداثيات الماوس الحالية استجابة لأحداث mousemove (أحداث الماوس JavaScript)، ولكن كل 250 مللي ثانية فقط:

دالة DisplayCoords(event) ( document.body.textContent = "الماوس عند النقطة " +event.pageX + ", " + events.pageY; ) var مجدولة = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = events; if (!scheduled) ( مجدولة = صحيح; setTimeout(function() ( مجدولة = false; DisplayCoords(lastEvent); ), 250); ) ));

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

كل حدث له نوع محدد ("مفتاح التشغيل"، "التركيز"، وما إلى ذلك) يحدده. يتم رفع معظم الأحداث على عنصر DOM محدد ثم يتم نشرها إلى العقد الأصلية للعنصر. وهذا يسمح للمعالجات المرتبطة بهذه العناصر بمعالجتها.

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

تؤدي عمليات الضغط على المفاتيح إلى إنشاء أحداث "keydown" و"keypress" و"keyup". يؤدي النقر بالماوس إلى إنشاء أحداث "رفع الماوس" و"رفع الماوس" و"النقر". تحريك الماوس - "تحريك الماوس" و"إدخال الماوس" و"إخراج الماوس".

يمكن تعريف حدث تمرير JavaScript باستخدام حدث "التمرير"، ويمكن تعريف تغيير التركيز باستخدام "التركيز" و"التمويه". بمجرد الانتهاء من تحميل المستند، يُطلق الحدث "load" للنافذة.

يمكن تشغيل جزء واحد فقط من برنامج JavaScript في المرة الواحدة. يجب أن تنتظر معالجات الأحداث والبرامج النصية المجدولة الأخرى حتى تنتهي البرامج النصية الأخرى في قائمة الانتظار من التنفيذ.

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

دعونا نلقي نظرة على أحداث JavaScript الأكثر شيوعًا والأكثر استخدامًا:

معالج
الأحداث

دعم عناصر وكائنات HTML

وصف

الحصول على عنصر للتركيز

لإكمال المثال التالي، نحتاج إلى مفهوم جديد - حدث.

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

لنفكر في أحد الأحداث الأكثر شيوعًا - التحميل - والذي يحدث عند تحميل مستند (عندما يتسبب المستخدم، من خلال أفعاله، في تحميل صفحة الويب).

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

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

الدالة resizeImg())( var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; ) ...

في المثال، تحدث الإجراءات الرئيسية في الدالة resizeImg():

المهمة Js8_4. ضع عدة صور (علامة img) في كود html. باستخدام طريقة التغيير:
- الحجم (خصائص العرض والارتفاع) لجميع صور الصفحة
- حجم الحدود (خاصية الحدود) لجميع الصور.
أكمل الكود:

var allImg=document...; // احصل على مجموعة من الصور لـ (var i=0; i< allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

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

مثال: يؤدي النقر فوق زر إلى ظهور مربع حوار يحتوي على رسالة "مرحبا!"

النصي:

في هذا المثال، نرى زرًا في كود html. يحتوي الزر على سمة onclick ( "عند النقر")، وقيمتها هي استدعاء دالة تسمى message() . هذه وظيفة مخصصة تم وصفها أعلاه في البرنامج النصي. في الوظيفة نفسها، يتم عرض مربع حوار، وهو ما يتم تحديده وفقًا للمهمة.

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

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

كود أتش تي أم أل:

النصي:

document.myForm.myButton.onclick = message; رسالة الوظيفة () (تنبيه ("مرحى!")؛ )

يوجد في كود html زر ذو سمة معرف، وهو ضروري للوصول إلى الزر من خلال برنامج نصي.

في البرنامج النصي، الذي يجب أن يكون موجودًا أسفل شجرة العناصر (ربما قبل إغلاق علامة النص)، يوجد استدعاء للزر (document.myForm.myButton)، والذي يتم تعيين معالج حدث onclick له بقيمة رابط الوظيفة. يمكن الوصول إلى زر من خلال سمة المعرف (document.getElementById("myButton").onclick = message;)

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

هذه الطريقة لمعالجة الأحداث هي الأقرب إلى ما يحدث، على سبيل المثال، في نظام التشغيل Windows.

المهمة Js8_5. أكمل المهمة وفقًا للتعليمات:

أخضر
...خضراء البحر
... أرجواني
...أرجواني
...القوات البحرية
...الأزرق الملكي

المهمة Js8_7. إنشاء صورة التمرير

- أضف علامة إلى الكود imgمع الصورة.
- التعريف بمعالجات الأحداث على الفأرة فوق(بالهداية) و com.onmouseout(أثناء الاختطاف). افعل هذا كوظائف.
على الفأرة فوقإجراء التحميل في العلامة imgصورة أخرى.
- نعلق على معالج الحدث com.onmouseoutإجراء تحميل صورة أخرى في علامة img.