مسج البرنامج التعليمي (الجزء 4)

الإعلانات

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

وكيف يمكنك استخدامها لتصحيح رمز jQuery الخاص بك.

تتيح لك الأحداث - من بين الاستخدامات الأخرى - التفاعل مع الأشياء التي تحدث على الصفحة وتفاعلات المستخدم - النقر والتمرير وكل تلك الأشياء الرائعة.

ما هو الحدث على أي حال؟

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

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

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

سهل: النقر

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

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

$(محدد).على(حدث,عمل);

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

$ (". clickme"). on ("click"، function () { console.log ($ (this) .text ()) ؛ });

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

إيقاف الإجراء الافتراضي:

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

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

$ ("# myForm"). on ("Submit"، function (event) { console.log (حدث) ؛ event.preventDefault () ؛ عودة كاذبة؛ });

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

في هذه الحالة ، يتم تسجيل الحدث فقط على وحدة التحكم ، ولكن في الواقع قد يكون لديك معالج AJAX هنا ، والذي سنتناوله في الدرس التالي.

يمكن أيضًا تشغيل الأحداث بواسطتك

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

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

$ (document) .ready (function () { $ ('# username'.focus () ؛ });

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

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

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

كما هو الحال دائمًا ، نرحب بالتعليقات والأسئلة والتعليقات والمشكلات أدناه.

حقوق الصورة: شاشة لمس عبر Shutterstock