سيوضح هذا المنشور 'event.target' واستخدامه في JavaScript.
ما هو 'event.target' في جافا سكريبت؟
ال ' event.target 'هي خاصية / سمة لـ' حدث 'في جافا سكريبت. يشير إلى العنصر الذي أطلق الحدث. للوصول إلى سمة event.target ، يجب الاستماع إلى حدث العنصر. ال ' addEventListener () 'للاستماع إلى حدث معين.
بناء الجملة
لاستخدام خاصية 'event.target' ، اتبع بناء الجملة المحدد:
عنصر. addEventListener ( '<حدث>' ، وظيفة ( حدث ) {
وحدة التحكم. سجل ( حدث. هدف )
} )
في النحو المحدد ،
- ال ' addEventListener () يتم استخدام طريقة 'لإضافة معالج حدث لعنصر معين.
- ' <حدث> 'يشير إلى أي حدث ، مثل' انقر '،' تمرير الماوس '، وما إلى ذلك وهلم جرا.
مثال
في المثال الموضح ، سنحصل على العنصر الذي أدى إلى تشغيل الحدث باستخدام ' event.target ' ملكية.
هنا ، سننشئ زرًا عن طريق تعيين معرف ' BTN 'المستخدم في JavaScript للوصول إلى الزر:
< معرف الزر = 'btn' > انقر هنا زر >
في ملف JavaScript ، سنحصل أولاً على مرجع الزر باستخدام المعرف المخصص له بمساعدة ' getElementById () ' طريقة:
مقدار ثابت زر = وثيقة. getElementById ( 'btn' ) ؛إرفاق مستمع الحدث بالزر. ال ' انقر 'عند نقرة الزر ، ويتم تمرير كائن الحدث إلى مستمع الحدث كوسيطة. ال ' event.target 'يمكن الوصول إليها من وظيفة المستمع للحصول على مرجع لعنصر الزر الذي أدى إلى تشغيل الحدث:
زر. addEventListener ( 'انقر' ، وظيفة ( حدث ) {وحدة التحكم. سجل ( 'الحدث المستهدف:' ، حدث. هدف ) ؛
} ) ؛
يُظهر الإخراج مرجع الزر المحدد الذي تم النقر فوقه:
يمكنك الحصول على مزيد من المعلومات وتطبيق وظائف مختلفة مثل التصميم على الحدث المستهدف باستخدام سماته.
ما هي سمات 'event.target'؟
هناك العديد من السمات المميزة للخاصية 'event.target' التي توفر معلومات حول العنصر الهدف. بعض السمات المشتركة للكائن event.target هي كما يلي:
| سمات event.target | وصف |
| event.target.tagname | تستخدم للحصول على ' اسم 'من علامة HTML للعنصر الهدف. |
| event.target.value | تستخدم لاسترداد ' قيمة 'للعنصر الهدف. تستخدم هذه السمة في الغالب لعناصر الإدخال. |
| event.target.id | للحصول على ' بطاقة تعريف ”للعنصر الهدف ، استخدم السمة المحددة. |
| event.target.classList | القائمة ل ' الطبقات 'الذي يحتوي على العنصر الهدف يتم الوصول إليه من خلال هذه السمة. |
| event.target.textContent | تستخدم للحصول على ' محتوى النص 'للعنصر الهدف. |
| event.target.href | تسترد هذه السمة ' href 'للعنصر الهدف ، مثل الروابط. |
| event.target.style | لتعديل ' CSS ”للعنصر الهدف ، استخدم هذه السمة. |
مثال 1: تغيير لون الخلفية للعنصر المستهدف
في المثال المقدم ، سنقوم بتغيير لون خلفية العنصر الهدف باستخدام ' أسلوب 'على' انقر ' حدث:
مقدار ثابت زر = وثيقة. getElementById ( 'btn' ) ؛زر. addEventListener ( 'انقر' ، وظيفة ( حدث ) {
حدث. هدف . أسلوب . لون الخلفية = 'أزرق' ؛
} ) ؛
انتاج |
مثال 2: احصل على قيمة العنصر المستهدف
قم بإنشاء حقل إدخال نصي ومنطقة لعرض النص باستخدام علامة
. قم بتعيين معرفات لحقل الإدخال وعلامة
كـ ' takeInput ' و ' يعرض '، على التوالى:
< نوع الإدخال = 'نص' بطاقة تعريف = 'takeInput' >< ع معرف = 'يعرض' > ص >
احصل على مرجع حقل النص باستخدام ' getElementById () ' طريقة:
كان الإدخال = وثيقة. getElementById ( 'takeInput' ) ؛استخدم ال ' قيمة 'مع' event.target 'للحصول على قيمة العنصر المستهدف:
مدخل. addEventListener ( 'مدخل' و ( حدث ) => {وثيقة. getElementById ( 'يعرض' ) . داخلي HTML = حدث. هدف . قيمة ؛
} )
كما ترى ، تم استرداد القيمة التي تم إدخالها في مربع النص بنجاح باستخدام ' قيمة ' يصف:
كان هذا كل شيء عن 'event.target' في JavaScript.
خاتمة
ال ' event.target 'يشير إلى العنصر الذي أطلق / بدأ الحدث. هناك بعض السمات الخاصة بالخاصية 'event.target' التي توفر معلومات حول العنصر الهدف. على سبيل المثال، ' event.target.tagname '،' .قيمة '،' .بطاقة تعريف '،' .أسلوب '، وما إلى ذلك وهلم جرا. يوضح هذا المنشور 'event.target' وسماته واستخدامه في JavaScript.