כיצד להגדיר onClick עם JavaScript

אירוע הוא פעולה שבוצעה על ידי דפדפן או משתמש. ניתן להשתמש במושג JavaScript של מטפלי אירועים או מאזינים כדי לטפל באירועים אלו. אירוע מסוים מעורר ביצוע של מאזין אירועים. אחד מאותם מאזינים לאירועים הוא ' בלחיצה .' כאשר משתמש לוחץ על אלמנט, מאזין אירועי onClick מופעל או מופעל.

מדריך זה יגדיר את ההליך כיצד להגדיר onClick עם JavaScript.

כיצד להגדיר onClick עם JavaScript

כדי להגדיר את בלחיצה עם JavaScript, ישנן שתי שיטות שונות, שהן:

השיטה הראשונה היא להקצות ערך לרכיב HTML בלחיצה תכונה באמצעות JavaScript.
השיטה השנייה היא להוסיף במפורש מאזין אירועים באירוע HTML אשר בודק את ה-' נְקִישָׁה 'אירוע.

דוגמה 1: הקצה ערך לתכונת onclick של רכיב ה-HTML באמצעות JavaScript

בקובץ HTML, צור כותרת וכפתור ' לחץ עלי 'עם תעודת הזהות' js ' שתפעיל את פונקציית JavaScript בזמן הלחיצה עליה.

< h2 > מַעֲרֶכֶת נכס onClick עם JavaScript h2 >

< מזהה כפתור = 'js' > לחץ עלי לַחְצָן >

בשלב הבא, תיגש לכפתור שנוצר ויוצג ' בלחיצה ' תצורף אליו. לאחר לחיצה על הכפתור, הפונקציה שצוינה תבוצע וההודעה ' style.backgroundColor ' המאפיין ישנה את צבע הכפתור באופן הבא:

מסמך. getElementById ( 'js' ) . בלחיצה = פונקציה jsFunc ( ) {

מסמך. getElementById ( 'js' ) . סִגְנוֹן . צבע רקע = 'סָגוֹל' ;

}

הפלט המתאים יהיה:

דוגמה 2: הוסף במפורש מאזין אירועים באירוע HTML

צור כפתור ' לחץ כאן! ' ומקצה מזהה ' מִקרֶה ' אליו שיפעיל את שיטת addEventListener() ב- 'נְקִישָׁה' מִקרֶה:

< מזהה כפתור = 'מִקרֶה' > לחץ כאן ! חָזָק > לַחְצָן חָזָק >>

אחזר את הכפתור באמצעות הלחצן שלו תְעוּדַת זֶהוּת ולאחר מכן צרף ' addEventListener() שיטת ' על ידי העברת ' נְקִישָׁה 'אירוע ופונקציה' eventFunc ' שבו ישתנה צבע הרקע של הכפתור:

מסמך. getElementById ( 'מִקרֶה' ) . addEventListener ( 'נְקִישָׁה' , eventFunc ) ;

function eventFunc ( ) {

מסמך. getElementById ( 'מִקרֶה' ) . סִגְנוֹן . צבע רקע = 'ירוק' ;

}

תְפוּקָה

דוגמה 3: שימוש בכל שיטות onClick בבת אחת

בדוגמה זו, הפעולה של כל השיטות תוצג בבת אחת. ראשית היא דרך ברירת המחדל להוספת תכונת onclick בתוך תג ה-HTML עצמו. לאחר מכן, הוכחו גם שתי השיטות להגדרת תכונת onclick בעזרת JavaScript.

בדוגמה הבאה, צור שלושה לחצנים וראה את הפונקציונליות של תכונת onclick.

הכפתור הראשון ' נְקִישָׁה ' יקרא ל' htmlFunc() ' באירוע הקליק.
הכפתור ' לחץ עלי ' ייגש עם המזהה שהוקצה לו ' js ' ולאחר מכן הקצה ערך לתכונת onclick של הלחצן באמצעות JavaScript.
הכפתור ' לחץ כאן! ' ייגשו באמצעות המזהה ' מִקרֶה ' ולאחר מכן צרף ' addEventListener() 'שיטה עם זה:

< מזהה כפתור = 'html' בלחיצה = 'htmlFunc()' > נְקִישָׁה לַחְצָן >< br >< br >

< מזהה כפתור = 'js' > לחץ עלי לַחְצָן >< br >< br >

< מזהה כפתור = 'מִקרֶה' > לחץ כאן ! לַחְצָן >

הפונקציה שלהלן תפעיל את ' בלחיצה 'אירוע של הכפתור' נְקִישָׁה ”:

function htmlFunc ( ) {

עֵרָנִי ( 'הלחצן שנלחץ על ידי אירוע HTML onClick' ) ;

}

בלחיצה על ' לחץ עלי ', הפונקציה הבאה תפעיל במקום בו תוצג הודעת אזהרה.

מסמך. getElementById ( 'js' ) . בלחיצה = פונקציה jsFunc ( ) {

עֵרָנִי ( 'הלחצן שנלחץ על ידי JavaScript onClick הפונקציה' ) ;

}

הפונקציה הנתונה תפעיל את הכפתור ' לחץ כאן! ”:

מסמך. getElementById ( 'מִקרֶה' ) . addEventListener ( 'נְקִישָׁה' , eventFunc ) ;

function eventFunc ( ) {

עֵרָנִי ( 'הכפתור שנלחץ על ידי JavaScript onClick עם שיטת EventListener' ) ;

}

הפלט יציג הודעות התראה בכל לחיצה על כפתור:

סיכום

כדי להגדיר את onclick עם JavaScript, ישנן שתי גישות שונות, הראשונה היא להקצות ערך לתכונת onclick של אלמנט ה-HTML באמצעות JavaScript והגישה השנייה היא להוסיף במפורש מאזין אירועים באירוע ה-HTML אשר בודק את ' נְקִישָׁה 'אירוע. מדריך זה הגדיר את השיטות להגדרת onClick עם JavaScript יחד עם דוגמאות.

כיצד להגדיר onClick עם JavaScript