كيفية تعيين onClick With JavaScript

الحدث هو إجراء يتخذه متصفح أو مستخدم. يمكن استخدام مفهوم JavaScript لمعالجات الأحداث أو المستمعين للتعامل مع هذه الأحداث. يؤدي حدث معين إلى تشغيل مستمع الحدث. أحد مستمعي الأحداث هؤلاء هو ' عند النقر . ' عندما ينقر المستخدم على عنصر ما ، يتم تشغيل أو تنفيذ مستمع حدث onClick.

سيحدد هذا البرنامج التعليمي الإجراء الخاص بكيفية تعيين onClick with JavaScript.

كيفية تعيين onClick With JavaScript

لتعيين عند النقر باستخدام JavaScript ، هناك طريقتان مختلفتان ، وهما:

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

المثال 1: عيّن قيمة لسمة النقر على عنصر HTML باستخدام جافا سكريبت

في ملف HTML ، أنشئ عنوانًا وزرًا ' انقر فوق لي 'بالمعرف' شبيبة 'مما يؤدي إلى تشغيل وظيفة JavaScript أثناء النقر عليها.

< h2 > تعيين خاصية onClick مع JavaScript h2 >

< معرف الزر = 'شبيبة' > انقر فوق لي زر >

في الخطوة التالية ، سيتم الوصول إلى الزر الذي تم إنشاؤه و ' عند النقر 'السمة'. عند النقر فوق الزر ، سيتم تنفيذ الوظيفة المحددة و ' النمط. الخلفية 'ستغير لون الزر على النحو التالي:

وثيقة. getElementById ( 'شبيبة' ) . عند النقر = وظيفة jsFunc ( ) {

وثيقة. getElementById ( 'شبيبة' ) . نمط . لون الخلفية = 'أرجواني' ؛

}

سيكون الإخراج المقابل:

مثال 2: قم بإضافة مستمع حدث بشكل صريح في حدث HTML

إنشاء زر ' انقر هنا! 'وتعيين معرف' حدث 'إلى ذلك سيؤدي إلى تشغيل طريقة addEventListener () على ملف 'انقر' حدث:

< معرف الزر = 'حدث' > انقر هنا ! قوي > زر قوي >>

قم بإحضار الزر باستخدام ملف هوية شخصية ثم أرفق ' addEventListener () 'عن طريق تمرير' انقر 'حدث ووظيفة' حدث 'حيث سيتم تغيير لون خلفية الزر:

وثيقة. getElementById ( 'حدث' ) . addEventListener ( 'انقر' ، حدث ) ؛

حدث الوظيفة ( ) {

وثيقة. getElementById ( 'حدث' ) . نمط . لون الخلفية = 'لون أخضر' ؛

}

انتاج |

مثال 3: استخدام جميع أساليب onClick مرة واحدة

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

في المثال التالي ، أنشئ ثلاثة أزرار واطلع على وظيفة سمة onclick.

الزر الأول ' انقر 'سوف يستدعي' htmlFunc () 'في انقر فوق الحدث.
الزر ' انقر فوق لي 'سيتم الوصول إليه بالمعرف المخصص له' شبيبة 'ثم قم بتعيين قيمة لسمة onclick للزر باستخدام JavaScript.
الزر ' انقر هنا! 'سيتم الوصول إليها باستخدام المعرف' حدث 'ثم إرفاق' addEventListener () 'معها:

< معرف الزر = 'لغة البرمجة' عند النقر = 'htmlFunc ()' > انقر زر > < ر > < ر >

< معرف الزر = 'شبيبة' > انقر فوق لي زر > < ر > < ر >

< معرف الزر = 'حدث' > انقر هنا ! زر >

ستؤدي الوظيفة أدناه إلى تشغيل ' عند النقر 'حدث الزر' انقر ':

وظيفة htmlFunc ( ) {

إنذار ( 'الزر الذي تم النقر عليه بواسطة حدث HTML onClick' ) ؛

}

عند النقر فوق ' انقر فوق لي '، ستظهر الوظيفة التالية حيث سيتم عرض رسالة تحذير.

وثيقة. getElementById ( 'شبيبة' ) . عند النقر = وظيفة jsFunc ( ) {

إنذار ( 'الزر الذي تم النقر فوقه بواسطة JavaScript onClick function' ) ؛

}

ستؤدي الوظيفة المحددة إلى تشغيل الزر ' انقر هنا! ':

وثيقة. getElementById ( 'حدث' ) . addEventListener ( 'انقر' ، حدث ) ؛

حدث الوظيفة ( ) {

إنذار ( 'الزر الذي تم النقر فوقه بواسطة JavaScript onClick with EventListener Method' ) ؛

}

سيعرض الإخراج رسائل تنبيه عند كل نقرة زر:

استنتاج

لتعيين onclick باستخدام JavaScript ، هناك طريقتان مختلفتان ، الأول هو تعيين قيمة لسمة onclick لعنصر HTML باستخدام JavaScript ، والطريقة الثانية هي إضافة مستمع الحدث بشكل صريح إلى حدث HTML الذي يتحقق من ' انقر ' حدث. حدد هذا البرنامج التعليمي الطرق لتعيين onClick with JavaScript جنبًا إلى جنب مع الأمثلة.

كيفية تعيين onClick With JavaScript