في هذا الدرس سنلقي نظرة على جميع الطرق للتعامل مع الأحداث في JavaScript.

الأحداث عبر السمات

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

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

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

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

لذلك دعونا نرى ما يمكن أن تقدمه لنا JavaScript عند التعامل مع الأحداث.

الأحداث من خلال العمل مع السمات في الأساس، السمة onclick هي نفس السمة، على سبيل المثال، value .وإذا تمكنا من تغيير سمة القيمة بهذه الطريقة -

elem.value ، ثم يمكننا تغيير سمة onclick بنفس الطريقة.إذا فعلنا هذا:

elem.onclick = func

، ثم نربط الدالة func بعنصر elem. انظر إلى المثال وفيما يلي سنناقش جميع الفروق الدقيقة في هذه الطريقة: var elem = document.getElementById("test"); elem.onclick = func; الدالة func() ( تنبيه("!"); )الآن يجب أن أخبرك بالسر المظلم لجافا سكريبت: إذا تمت كتابة دالة بدون أقواس، على سبيل المثال. func، ثم ترجع لها كود المصدر، وإذا كان بين قوسين، على سبيل المثال

وظيفة ()

، ثم تقوم بإرجاع نتيجة الدالة.

أنا متأكد أنك بعد قراءة هذا لن تفهم تماما ما أردت أن أنقله لك، لذا قم بتشغيل المثال وأعد قراءة الفقرة السابقة مرة أخرى. ، ثم يمكننا تغيير سمة onclick بنفس الطريقة.هنا مثال: // تقوم الدالة بإرجاع السلسلة "!" وظيفة func() (return "!"; ) تنبيه(func()); // سترى السطر "!" تنبيه (وظيفة)؛ // الآن سترى الكود المصدري للوظيفة func!الآن، بعد أن عرفنا هذا السر الرهيب، دعونا نعود إلى السطر - ففي هذه الحالة

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

دعني أذكرك برمز الوظيفة المعنية:

الدالة func() ( تنبيه("!"); ) دعونا نتذكر طريقة setInterval (راجع الدرس الخاص بالعمل مع المؤقتات في JavaScript) عندما استخدمناها بهذه الطريقة window.setInterval (المؤقت، 1000)

- في هذه الحالة، قمنا أيضًا بكتابة دالة المؤقت بدون قوسين، لأننا لم نهتم بنتيجة الدالة، بل بكودها.

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

وسوف يأتي في الوقت المناسب.

مزايا وعيوب هذه الطريقة

دعونا الآن نناقش مزايا وعيوب هذه الطريقة.

المزايا

المزايا هي كما يلي: الآن، إذا أردنا تعيين حدث واحد لجميع المدخلات على الصفحة في وقت واحد، ليست هناك حاجة لتعيين سمة يدويًا مع حدث لكل منها. يمكنك ببساطة الحصول على كافة المدخلات، وتكرارها وإرفاق حدث لكل منها.< elems.length; i++) { elems[i].onclick = func; } function func() { alert("!"); }

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

/* سيتم تشغيل هذا الرمز عند تحميل الصفحة.

أذكرك أنك بحاجة إلى كتابته بعد كود HTML. */ var elems = document.getElementsByTagName("input"); ل (فار ط = 0؛ ط

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

عند النقر = "الوظيفة (هذا)"

، ولكن الأمر الآن هكذا - العناصر [i].onclick = func(this)- لا نستطيع أن نفعل ذلك.

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

(حسب المكان الذي كتب فيه). وفي حالتنا، لن يرتبط بالعنصر الذي نحتاجه (أي العنصر الذي نقرنا عليه). elems[i].onclick = func؟

في الحقيقة هذا موجود داخل الدالة func ويشير إلى العنصر الذي وقع فيه الحدث الذي تسبب في هذه الدالة. أي أنه إذا نقرت على الإدخال الأول، فسيحتوي هذا على رابط إليه، وإذا نقرت على الإدخال الثاني، فسيحتوي عليه. في الأساس، السمة onclick هي نفس السمة، على سبيل المثال، value .في هذه الحالة، فكر في هذا باعتباره متغير العنصر الذي تم الحصول عليه عبر getElementById . على سبيل المثال، يسمح لك بالوصول إلى سمة القيمة، وهو ما يعني this.value

سوف تفعل الشيء نفسه.

< elems.length; i++) { elems[i].onclick = func; } function func() { alert(this.value); //изменение только здесь }

لذا، دعونا أخيرًا نحل مشكلتنا - لنجعل التنبيه يعرض محتويات سمة القيمة للإدخال الذي تم النقر عليه:

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

وظيفة func() ( تنبيه (this.value); // لن يتم عرض ما هو متوقع)

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

دعني أذكرك أن الخيار الصحيح هو:

وظيفة func(elem) (تنبيه(elem.value); // سيعرض محتويات سمة القيمة)

عيوب

الآن دعونا نتحدث عن العيوب.

عيب هذه الطريقة هو أنه لا يمكننا ربط سوى دالة واحدة بحدث ما.

إذا حاولنا كتابة دالة واحدة ثم أخرى، فلن ننجح.

في المثال التالي، نحاول ربط وظيفتين func1 و func2 بالحدث onclick. ومع ذلك، عند النقر فوق عنصر ما، ستعمل الوظيفة الثانية فقط، لأنها ستحل محل الوظيفة الأولى:

var elem = document.getElementById("test"); elem.onclick = func1; // هنا قمنا أولاً بربط func1 elem.onclick = func2; // والآن لم تعد func2 و func1 مرتبطتين بالوظيفة func1() ( تنبيه("1"); ) وظيفة func2() ( تنبيه("2"); )

ومع ذلك، هناك عيب آخر - لا يمكننا بسهولة إلغاء ربط وظيفة func1 فقط من عند النقر، على سبيل المثال، مع ترك وظيفة func2 مقيدة. يمكنك، بالطبع، إنهاء هياكل التعليمات البرمجية الكبيرة، ولكن هذا ليس ضروريًا إذا كنت تستخدم طريقة أكثر تقدمًا لربط حدث ما - من خلال addEventListener. دعونا نرى كيفية العمل مع هذه الوظيفة:

العمل مع addEventListener

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

في هذه الحالة، يتم كتابة اسم الحدث بدون "on": "click" بدلاً من "onclick"، و"mouseover" بدلاً من "onmouseover"، وهكذا. تتم كتابة اسم الوظيفة (المعلمة الثانية) بدون علامات اقتباس وبدون أقواس (لقد ناقشنا بالفعل سبب الحاجة إلى ذلك أعلاه).

دعونا نتأكد من أنه عند النقر على الزر، يتم استدعاء الدالة func:

var elem = document.getElementById("test"); elem.addEventListener("click", func); الدالة func() ( تنبيه("!"); ) دعونا الآن نربط حدثين في وقت واحد. في هذه الحالة، لن يكون لدينا مثل هذه المشاكل كما في الحالة السابقة - لن تتم الكتابة فوق الأحداثبعضها البعض

، بغض النظر عن عدد المعلنين منهم:

var elem = document.getElementById("test"); elem.addEventListener("click", func1); elem.addEventListener("click", func2); وظيفة func1() ( تنبيه("1"); ) وظيفة func2() ( تنبيه("2"); )

إذا قمت بنسخ هذا الرمز وتشغيله بنفسك، فستعمل كل من الدالتين func1 و func2.

العمل مع هذا لـ addEventListener

لقد ناقشنا بالفعل العمل مع هذا إذا قمت بربط الأحداث بالطريقة الثانية (من خلال خاصية العنصر).

في حالة addEventListener، يعمل هذا بطريقة مماثلة - سيشير إلى العنصر الذي وقع فيه الحدث.

دعونا نلقي نظرة على مثال: ربط حدث onclick بزر، والذي سيطلق وظيفة func. ستعرض هذه الوظيفة قيمة الزر الخاص بنا:

var elem = document.getElementById("test"); elem.addEventListener("click", func); الدالة func() ( تنبيه(this.value); )

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

حسنًا، سنحصل الآن على مجموعة من الأزرار باستخدام getElementsByTagName وسنقوم بتعيين وظيفة func لكل منها.

var elems = document.getElementsByTagName("input"); ل (فار ط = 0؛ ط< elems.length; i++) { elems[i].addEventListener("click", func); } function func() { alert(this.value); }

إزالة الارتباط عبر RemoveEventListener

سنتعامل الآن مع حقيقة أننا سنحذف الوظائف المرتبطة بالحدث.

ما سنحصل عليه: على سبيل المثال، إذا كانت الدالتان func1 و func2 مرتبطتين بحدث onclick، فيمكننا إلغاء ربط الدالة func1 دون التأثير على func2 والعكس صحيح.

دعونا نربط 3 وظائف بالعنصر: func1 و func2 و func3، والتي ستعرض الأرقام 1 و 2 و 3 على الشاشة:

var elem = document.getElementById("test"); elem.addEventListener("click", func1); elem.addEventListener("click", func2); elem.addEventListener("click", func3); وظيفة func1() ( تنبيه("1"); ) وظيفة func2() ( تنبيه("2"); ) وظيفة func3() ( تنبيه("3"); )

الآن، مباشرة بعد الربط، سنقوم بفك ربط الدالتين func1 و func2. يتم ذلك باستخدام التابع RemoveEventListener، الذي يأخذ نفس المعلمات مثل addEventListener:

var elem = document.getElementById("test"); elem.addEventListener("click", func1); elem.addEventListener("click", func2); elem.addEventListener("click", func3); elem.removeEventListener("click", func1); elem.removeEventListener("click", func2); وظيفة func1() ( تنبيه("1"); ) وظيفة func2() ( تنبيه("2"); ) وظيفة func3() ( تنبيه("3"); )

إذا قمت بتشغيل هذا المثال، سترى أن func3 سيعمل، لكن الأولين لن يعملا.

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

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

تعيين معالجات الأحداث

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

طرق مختلفة لتعيين معالج الحدث

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

استخدام الأحداث البسيطة

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

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

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

انقر علي

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

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

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

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

العمل مع الوظائف

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

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

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

نتيجة فار =1؛