קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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

אירוע יכול להיות כאשר משתמש לוחץ על רכיב HTML, הדף נטען או כאשר ערך שדה קלט משתנה. אתה יכול לכתוב קוד שמשנה את מבנה ה-HTML כאשר מתרחש אירוע. למד שלוש דרכים שונות שבהן תוכל להוסיף מאזינים לאירועים לקוד שלך.

1. שיטת addEventListener

שיטת addEventListener היא אחת הפופולריות שיטות מאזינים לאירועים. יש לו שלושה פרמטרים:

  • אובייקט המייצג את האירוע.
  • פונקציה לטפל בזה.
  • שימוש בוליאני אופציונלי, useCapture, המתאר כיצד האירוע מתפשט ברחבי ה-DOM.

האירוע יכול להיות כל אירוע DOM שצוין ברכיב יעד. פונקציה מוגדרת כדי להגיב לאותו אירוע כאשר הוא מתרחש.

הפונקציה יכולה להיות אנונימית או פונקציה בעלת שם. יעדים פופולריים כוללים אלמנט, ילדיו, מסמך וחלון התומך באירוע.

ה-addEventListener() הוא שיטה מומלצת לניהול מאזיני אירועים ב-JavaScript. זה עובד על כל יעד אירוע, לא רק על רכיבי HTML, ותומך במספר מטפלי אירועים.

instagram viewer

ייתכן שתרצה לבצע קוד כלשהו ב-DOM. ניתן להדפיס טקסט, לבצע חישובים או להציג תמונה כאשר משתמש לוחץ על הכפתור.

בואו נמחיש בעזרת הקוד הבא:

html>
<html>
<גוּף>
<h1>שיטת addEventListener עם פונקציותh1>
<לַחְצָןתְעוּדַת זֶהוּת="myBtn">לחץ כאןלַחְצָן>
<עתְעוּדַת זֶהוּת="הַדגָמָה">ע>
גוּף>
html>

לאחר מכן, הוסף את מאזין האירועים באמצעות הכפתור.

const אלמנט = מסמך.getElementById("myBtn");
element.addEventListener("נְקִישָׁה", myFunction1);
פוּנקצִיָהmyFunction1() {
מסמך.getElementById("הַדגָמָה").innerHTML += "הפונקציה בוצעה! "
}

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

2. האצלת אירועים ל-addEventListener

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

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

הנה דוגמה למשלחת אירועים:

html>
<html>
<גוּף>
<h1> משלחת אירוע על כפתוריםh1>
<div>
<לַחְצָן>כפתור 1לַחְצָן>
<לַחְצָן>כפתור 2לַחְצָן>
<לַחְצָן>כפתור 3לַחְצָן>
div>
גוּף>
html>

לאחר מכן, הוסף את מאזיני האירועים לכל הכפתורים עם מספר שורות קוד בלבד.

const div = מסמך.querySelector('div')
div.addEventListener("נְקִישָׁה", (אירוע) => {
אם (event.target.tagName 'לַחְצָן') {
לְנַחֵם.עֵץ('לחצו על הכפתור')
 }
});

האצלת אירוע היא דפוס המבוסס על בועת אירוע. בועת אירוע מתרחשת כאשר אלמנט מקבל אירוע ומשדר אותו לרכיבי האב והאב הקדמוניים שלו ב-DOM. זה הפצת אירועים מושג שמתרחש כברירת מחדל ב-JavaScript.

3. שימוש בתכונה onclick

אתה יכול להשתמש בתכונה onclick כדי להפעיל JavaScript כאשר משתמשים לוחצים על אלמנט. כמו שיטת addEventListener, אתה יכול להשתמש בשיטת onclick כדי להדפיס טקסט, לבצע חישובים ולשנות תכונות של רכיבים ה-DOM.

אתה יכול להוסיף את מאזין האירועים onclick כמטפל אירועים מוטבע לאלמנט ה-HTML. האירוע מתרחש כאשר משתמש לוחץ על האלמנט. שנה את הצבע של הפסקה הבאה באופן דינמי בשיטת onclick:

html>
<html>
<גוּף>
<h1> בצע ב-Click Eventsh1>
<עתְעוּדַת זֶהוּת="הַדגָמָה"בלחיצה="myFunction()">
 לחץ עליי כדי לשנות את צבע הטקסט שלי.
ע>
גוּף>
html>

בקובץ JavaScript, הוסף את הקוד הבא:

פוּנקצִיָהmyFunction() {
מסמך.getElementById("הַדגָמָה").style.color = "אָדוֹם";
}

הפלט יופיע כמוצג:

למה ללמוד על מאזיני אירועים?

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