פוסט זה ימחיש את 'event.target' ואת השימוש בו ב-JavaScript.
מה זה 'event.target' ב-JavaScript?
ה ' event.target ' הוא מאפיין/תכונה של ' מִקרֶה ' ב-JavaScript. זה מתייחס לאלמנט שהפעיל את האירוע. כדי לגשת לתכונה event.target, יש להאזין לאירוע של האלמנט. ה ' addEventListener() השיטה משמשת להאזנה לאירוע הספציפי.
תחביר
לשימוש במאפיין 'event.target', עקוב אחר התחביר הנתון:
אֵלֵמֶנט. addEventListener ( '<אירוע>' , פונקציה ( מִקרֶה ) {
לְנַחֵם. עֵץ ( מִקרֶה. יַעַד )
} )
בתחביר הנתון,
- ה ' addEventListener() השיטה משמשת להוספת מטפל באירועים עבור האלמנט הספציפי.
- ' <אירוע> ' מציין אירוע כלשהו, כגון ' נְקִישָׁה ', ' העברה בעכבר ', וכולי.
דוגמא
בדוגמה הנתונה, נקבל את האלמנט שהפעיל את האירוע באמצעות ' event.target ' תכונה.
כאן, ניצור כפתור על ידי הקצאת מזהה ' btn ' המשמש ב-JavaScript לגישה ללחצן:
< מזהה כפתור = 'btn' > לחץ כאן לַחְצָן >
בקובץ JavaScript, ראשית, נקבל את ההפניה של הכפתור באמצעות המזהה שהוקצה לו בעזרת ה-' getElementById() ' שיטה:
const לַחְצָן = מסמך. getElementById ( 'בטן' ) ;צרף מאזין אירועים באמצעות הכפתור. ה ' נְקִישָׁה אירוע מופעל בלחיצה על הכפתור, ואובייקט האירוע מועבר למאזין האירועים כארגומנט. ה ' 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: שנה את צבע הרקע של אלמנט היעד
בדוגמה המצורפת, נשנה את צבע הרקע של רכיב היעד באמצעות ' סִגְנוֹן מאפיין ' על ' נְקִישָׁה אירוע:
const לַחְצָן = מסמך. getElementById ( 'בטן' ) ;לַחְצָן. addEventListener ( 'נְקִישָׁה' , פונקציה ( מִקרֶה ) {
מִקרֶה. יַעַד . סִגְנוֹן . צבע רקע = 'כְּחוֹל' ;
} ) ;
תְפוּקָה
דוגמה 2: קבל את הערך של אלמנט היעד
צור שדה טקסט קלט ואזור להצגת טקסט באמצעות תג
. הקצה מזהים לשדה הקלט ולתג
בתור ' קח קלט ' ו' הופעה ', בהתאמה:
< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'קח קלט' >< p id = 'הופעה' > ע >
קבל את ההפניה של שדה הטקסט באמצעות ' getElementById() ' שיטה:
היה קלט = מסמך. getElementById ( 'קח קלט' ) ;להשתמש ב ' ערך ' תכונה עם ' event.target ' כדי לקבל את הערך של הרכיב הממוקד:
קֶלֶט. addEventListener ( 'קֶלֶט' , ( מִקרֶה ) => {מסמך. getElementById ( 'הופעה' ) . innerHTML = מִקרֶה. יַעַד . ערך ;
} )
כפי שאתה יכול לראות שהערך שהוזן בתיבת הטקסט אוחזר בהצלחה באמצעות ' ערך 'תכונה:
זה היה הכל על 'event.target' ב-JavaScript.
סיכום
ה ' event.target ' מתייחס לאלמנט שהפעיל/יזם את האירוע. יש כמה תכונות של המאפיין 'event.target' המספקות מידע על רכיב היעד. לדוגמה, ' event.target.tagname ', ' .ערך ', ' .תְעוּדַת זֶהוּת ', ' .סִגְנוֹן ', וכולי. פוסט זה המחיש את 'event.target', את התכונות שלו ואת השימוש בו ב-JavaScript.