سيوضح هذا الدليل هدف حدث 'onchange' وعمله في JavaScript.
كيفية استخدام حدث 'onchange' في JavaScript؟
ال ' على التغيير 'يتم تنشيط الحدث عند تغيير قيمة عنصر HTML المحدد. عندما يتم تشغيل هذا الحدث ، يتم تنفيذ وظيفة JavaScript المرتبطة لأداء المهمة المحددة.
بناء الجملة
هدف. على التغيير = وظيفة ( ) { myScript } ؛
في النحو أعلاه:
- عنصر: يشير إلى عنصر HTML معين.
- وظيفة(): إنها تمثل الوظيفة المحددة التي سيتم استدعاؤها عند مشغل الحدث.
- myScript: يشير إلى تعريف وظيفة JavaScript لأداء مهمة محددة عند حدوث حدث 'onchange'.
بناء الجملة (باستخدام طريقة 'addEventListener ()')
هدف. addEventListener ( 'يتغير' ، myScript ) ؛
في الصيغة أعلاه ، ' addEventListener () 'تستخدم طريقة' على التغيير 'لتنفيذ وظيفة JavaScript لأداء مهام مختلفة.
مثال 1: تطبيق حدث 'onchange' لعرض القيمة المحددة باستخدام البنية الأساسية
في هذا السيناريو ، يرتبط حدث 'onchange' بقائمة خيارات لعرض قيمة الخيار الذي تم تغييره واستدعاء وظيفة JavaScript المقابلة.
كود HTML
ألق نظرة على كود HTML التالي:
< h2 > على التغيير حدث في JavaScript h2 >< ص > اختر لغة أخرى من القائمة. ص >
< حدد معرف = 'عرض' على التغيير = 'عينة()' >
< قيمة الخيار = 'لغة البرمجة' > لغة البرمجة خيار >
< قيمة الخيار = 'CSS' > CSS خيار >
< قيمة الخيار = 'جافا سكريبت' > جافا سكريبت خيار >
يختار >
< ع معرف = 'P1' > ص >
في الكود أعلاه:
- أولاً ، حدد عنوانًا فرعيًا باستخدام ' ' بطاقة شعار.
- بعد ذلك ، أضف فقرة مع البيان المذكور.
- بعد ذلك ، ' <اختر> 'تقوم العلامة بإنشاء قائمة منسدلة بمعرف معين' تجريبي ' و ال ' على التغيير 'الحدث يعيد التوجيه إلى الوظيفة' عينة() '، على التوالى.
- في نص العلامة '
- أخيرًا ، يتم إنشاء فقرة فارغة بمعرف ' P1 لعرض القيمة المختارة / المتغيرة من قائمة الخيارات.
كود جافا سكريبت
الآن ، نظرة عامة على تعليمات JavaScript البرمجية التالية:
< النصي >عينة دالة ( ) {
أين = وثيقة. getElementById ( 'عرض' ) . قيمة ؛
وثيقة. getElementById ( 'P1' ) . داخلي HTML = 'الخيار المحدد هو:' + ر ؛
}
النصي >
في كتلة التعليمات البرمجية أعلاه:
- بادئ ذي بدء ، أعلن عن وظيفة باسم ' عينة() '.
- في تعريفه ، تطبيق ' getElementById () 'للوصول إلى قيمة الخيار المحدد من قائمة الخيارات عبر' قيمة ' ملكية.
- أخيرًا ، اعرض القيمة باستخدام ' داخلي HTML ' ملكية.
انتاج |
كما هو موضح في الإخراج ، عند تحديد خيار من القائمة المنسدلة ، يقوم حدث 'onchange' بتشغيل واستدعاء الوظيفة المقابلة.
مثال 2: تطبيق حدث 'onchange' لتغيير نص حقل الإدخال بأحرف كبيرة باستخدام أسلوب 'addEventListener ()'
يشرح هذا المثال عمل حدث 'onchange' عن طريق تغيير حقل نص الإدخال إلى 'أحرف كبيرة' بمساعدة طريقة 'addEventListener ()'.
كود HTML
أولاً ، انتقل إلى كود HTML الوارد أدناه:
< h2 > على التغيير حدث في JavaScript h2 >اسم : < نوع الإدخال = 'نص' بطاقة تعريف = 'عرض' >
< زر > يُقدِّم زر >
في كود HTML أعلاه:
- حدد عنوانًا فرعيًا للمستوى 2 عبر ' ' بطاقة شعار.
- بعد ذلك ، أضف ' <إدخال> 'بالتسمية' اسم '، نوع المحتوى ' نص 'والمعرف المرتبط' تجريبي '، على التوالى.
- أخيرًا ، قم بتضمين زر باستخدام الزر ' <زر> ' بطاقة شعار.
كود جافا سكريبت
بعد ذلك ، انظر إلى كود JavaScript التالي:
< النصي >وثيقة. getElementById ( 'عرض' ) . addEventListener ( 'يتغير' ، عينة ) ؛
عينة دالة ( ) {
أين = وثيقة. getElementById ( 'عرض' ) ؛
ر. قيمة = ر. قيمة . إلى الحالة العليا ( ) ؛
}
النصي >
في كتلة التعليمات البرمجية هذه:
- لأول مرة ' document.getElementById () 'تستخدم طريقة' يتغير 'الحدث الذي سينتج عنه تغيير قيمة حقل نص الإدخال الذي يحتوي على معرف' تجريبي 'عند النقر فوق الزر.
- بعد ذلك ، يتم تعريف الوظيفة 'Sample ()' التي تستخدم طريقة 'document.getElementById ()' للوصول إلى حقل إدخال النص 'demo' ثم تغيير قيمته إلى 'الأحرف الكبيرة' عبر ' الأحرف الكبيرة() ' طريقة.
انتاج |
كما رأينا ، تم تحويل نص الإدخال إلى أحرف كبيرة عند النقر فوق الزر.
خاتمة
تقدم JavaScript ' على التغيير 'الذي ينطلق بمجرد تغيير حالة قيمة عنصر معين. إنه مشابه لـ ' المدخلات 'ولكن يحدث' oninput 'على الفور مع تغير القيمة بينما يتم تشغيل حدث' onchange 'عندما تفقد قيمة الحدث التركيز. يوضح هذا الدليل الهدف والعمل واستخدام حدث 'onchange' في JavaScript.