מדריך זה ידגים את המטרה והפעולה של אירוע '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 >< ע > בחר שפה אחרת מהרשימה. ע >
< בחר מזהה = 'הַדגָמָה' בשינוי = 'לִטעוֹם()' >
< ערך אופציה = 'HTML' > HTML אוֹפְּצִיָה >
< ערך אופציה = 'CSS' > CSS אוֹפְּצִיָה >
< ערך אופציה = 'JavaScript' > JavaScript אוֹפְּצִיָה >
בחר >
< p id = 'P1' > ע >
בקוד למעלה:
- ראשית, הגדר כותרת משנה באמצעות ' 'תג.
- לאחר מכן, הוסף פסקה עם ההצהרה המוצהרת.
- לאחר מכן, ה' <בחר> ' תג יוצר רשימה נפתחת עם מזהה שהוקצה ' הַדגָמָה ' וה ' בשינוי ' אירוע מפנה מחדש לפונקציה ' לִטעוֹם() ', בהתאמה.
- בגוף התג '<בחר>', רשימה של אפשרויות מצוינת באמצעות ' <אופציה> 'תג.
- לבסוף, נוצרת פסקה ריקה עם מזהה ' P1 ' כדי להציג את הערך שנבחר/השתנה מרשימת האפשרויות.
קוד JavaScript
כעת, סקירה כללית של קוד ה-JavaScript הבא:
< תַסרִיט >מדגם פונקציה ( ) {
איפה = מסמך. getElementById ( 'הַדגָמָה' ) . ערך ;
מסמך. getElementById ( 'P1' ) . innerHTML = 'האפשרות שנבחרה היא:' + ט ;
}
תַסרִיט >
בגוש הקוד שלמעלה:
- קודם כל, הכריז על פונקציה בשם ' לִטעוֹם() '.
- בהגדרתו, החל את ' getElementById() שיטת ' כדי לגשת לערך של האפשרות שנבחרה מרשימת האפשרויות באמצעות ' ערך ' תכונה.
- לבסוף, הצג את הערך באמצעות ' innerHTML ' תכונה.
תְפוּקָה
כפי שניתן לראות בפלט, לאחר בחירת אפשרות מהתפריט הנפתח, אירוע 'onchange' מפעיל ומפעיל את הפונקציה המתאימה.
דוגמה 2: החלת אירוע 'onchange' לשינוי טקסט שדה קלט באותיות רישיות באמצעות תחביר השיטה 'addEventListener()'
דוגמה זו מסבירה את פעולת אירוע 'onchange' על ידי שינוי שדה טקסט הקלט ל'אותיות גדולות' בעזרת שיטת 'addEventListener()'.
קוד HTML
ראשית, עבור על קוד ה-HTML שסופק להלן:
< h2 > בשינוי מִקרֶה ב-JavaScript h2 >שֵׁם : < סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'הַדגָמָה' >
< לַחְצָן > שלח לַחְצָן >
בקוד HTML לעיל:
- הגדר כותרת משנה של רמה 2 באמצעות ' 'תג.
- לאחר מכן, הוסף ' <קלט> 'שדה לפי התווית ' שֵׁם ', סוג תוכן ' טֶקסט ', והמזהה המשויך ' הַדגָמָה ', בהתאמה.
- לבסוף, כלול כפתור באמצעות ' <כפתור> 'תג.
קוד JavaScript
לאחר מכן, עיין בקוד ה-JavaScript הבא:
< תַסרִיט >מסמך. getElementById ( 'הַדגָמָה' ) . addEventListener ( 'שינוי' , מדגם ) ;
מדגם פונקציה ( ) {
איפה = מסמך. getElementById ( 'הַדגָמָה' ) ;
ט. ערך = ט. ערך . toUpperCase ( ) ;
}
תַסרִיט >
בגוש קוד זה:
- קודם ה ' document.getElementById() שיטת ' משתמשת ב' שינוי ' אירוע שיגרום לשינוי הערך של שדה טקסט הקלט בעל מזהה ' הַדגָמָה ' בלחיצת כפתור.
- לאחר מכן, הפונקציה 'Sample()' מוגדרת המשתמשת בשיטת 'document.getElementById()' כדי לגשת לשדה טקסט הקלט 'הדגמה' ולאחר מכן משנה את הערך שלה ל'אותיות גדולות' באמצעות ' UpperCase() ' שיטה.
תְפוּקָה
כפי שניתן לראות, טקסט הקלט הומר לאותיות רישיות בלחיצת כפתור.
סיכום
JavaScript מציע את הנפוץ ' בשינוי ” אירוע המופעל ברגע שמצב הערך של אלמנט מסוים משתנה. זה דומה ל' oninput ” אירוע אך ה-“oninput” מתרחש באופן מיידי כאשר הערך משתנה ואילו אירוע ה-“onchange” מופעל כאשר ערך האירוע מאבד מיקוד. מדריך זה הדגים את המטרה, העבודה והשימוש באירוע 'onchange' ב-JavaScript.