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

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

מהו תכנות מונחה אירועים?

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

מהו מאזין אירועים?

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

יצירת מאזין אירועים באמצעות JavaScript

אתה יכול להאזין לאירועים בכל אחד אלמנט ב-DOM. ל-JavaScript יש addEventListener() פונקציה שאתה יכול לקרוא לכל אלמנט בדף אינטרנט. ה

addEventListener() פונקציה היא שיטה של EventTarget מִמְשָׁק. כל האובייקטים התומכים באירועים מיישמים ממשק זה. זה כולל את החלון, המסמך ורכיבים בודדים בעמוד.

לפונקציה addEventListener() יש את המבנה הבסיסי הבא:

element.addEventListener("event", functionToExecute);

איפה:

• ה אֵלֵמֶנט יכול לייצג כל תג HTML (מכפתור ועד פסקה)
• ה "מִקרֶה" היא מחרוזת הנותנת שם לפעולה ספציפית ומוכרת
• ה functionToExecute הוא הפניה לפונקציה קיימת

בואו ניצור את דף האינטרנט הבא הכולל כמה רכיבי HTML:

ברוך הבא


 שלום, ברוכים הבאים לאתר שלי.


למד עוד





פרטי משתמש

שם משתמש: 

שלח

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

הקובץ app.js

document.querySelector('.btn').addEventListener("קליק", לחץ על הדגמה)
function clickDemo(){
 console.log("שלום לך")
}

קוד ה-JavaScript שלמעלה ניגש ללחצן הראשון בדף באמצעות ה- querySelector() פוּנקצִיָה. לאחר מכן הוא מוסיף מאזין אירועים לאלמנט זה באמצעות ה addEventListener() שיטה. לאירוע הספציפי שהוא מאזין לו יש את השם "קליק". כאשר הכפתור יפעיל את האירוע הזה, המאזין יקרא ל- clickDemo() פוּנקצִיָה.

קָשׁוּר: למד כיצד להשתמש בבוררי DOM

ה clickDemo() הפונקציה מדפיסה "Hi there" למסוף הדפדפן. בכל פעם שאתה לוחץ על הכפתור, אתה אמור לראות את הפלט הזה בקונסולה שלך.

פלט האירוע "לחץ".

מה הם אירועי עכבר?

ל-JavaScript יש א MouseEvent ממשק המייצג אירועים המתרחשים בגלל אינטראקציה של משתמש עם העכבר שלו. מספר אירועים משתמשים ב- MouseEvent מִמְשָׁק. אירועים אלו כוללים את הדברים הבאים:

• נְקִישָׁה
• dblclick
• להזיז עכבר
• העברה בעכבר
• יציאה בעכבר
• עכבר
• הורדת עכבר

ה נְקִישָׁה אירוע מתרחש כאשר משתמש לוחץ ומשחרר כפתור עכבר בזמן שהמצביע שלו נמצא מעל אלמנט. זה בדיוק מה שקרה בדוגמה הקודמת. כפי שניתן לראות מהרשימה למעלה, אירועי עכבר יכולים ללבוש צורות רבות.

אירוע עכבר נפוץ נוסף הוא dblclick, אשר מייצג לחיצה כפולה. זה מופעל כאשר משתמש לוחץ על כפתור עכבר פעמיים ברצף מהיר. דבר מדהים ב- addEventListener() הפונקציה היא שאתה יכול להשתמש בו כדי להקצות מאזיני אירועים מרובים לאלמנט בודד.

הוספת אירוע dblclick ללחצן הראשון

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("זו הדגמה כיצד ליצור אירוע בלחיצה כפולה")
}

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

בתמונה למעלה תראה את ההתראה שנוצרה, ותראה גם ששתי יציאות "היי שם" נוספות נמצאות בקונסולה. הסיבה לכך היא שאירוע בלחיצה כפולה הוא שילוב של שני אירועי קליק ויש מאזינים לאירועים לשניהם נְקִישָׁה וה dblclick אירועים.

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

מהם אירועי מקלדת?

ל-JavaScript יש א KeyboardEvent מִמְשָׁק. זה מקשיב לאינטראקציות בין משתמש למקלדת שלו. בעבר, KeyboardEvent היו שלושה סוגי אירועים. עם זאת, JavaScript הוציא מאז את ה- לחץ על מקש מִקרֶה.

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

אם נבקר שוב בדוגמה של HTML למעלה, המקום הטוב ביותר להוסיף מאזין לאירועי מקלדת הוא ב- קֶלֶט אֵלֵמֶנט.

הוספת מאזין אירועים מקלדת לקובץ app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`שלום ${e.target.value}, ברוכים הבאים לאתר שלי.`)
}

הקוד למעלה משתמש ב- querySelector() פונקציה לגשת לפסקה ו קֶלֶט אלמנטים בעמוד. לאחר מכן הוא קורא ל- addEventListener() שיטה על קֶלֶט אלמנט, אשר מקשיב ל- מפתח למעלה מִקרֶה. בכל פעם א מפתח למעלה מתרחש אירוע, ה captureInput() הפונקציה לוקחת את ערך המפתח ומוסיפה אותו לפסקה בעמוד. ה ה פרמטר מייצג את האירוע, ש-JavaScript מקצה באופן אוטומטי. לאובייקט האירוע הזה יש מאפיין, target, שהוא הפניה לאלמנט שהמשתמש קיים איתו אינטראקציה.

בדוגמה זו, התווית המצורפת ל- קֶלֶט השדה מבקש שם משתמש. אם תקליד את שמך ב-theinputfield, דף האינטרנט ייראה בערך כך:

הפיסקה מכילה כעת את ערך הקלט שהוא, בדוגמה שלמעלה, "Jane Doe".

addEventListener לוכד כל מיני אינטראקציות משתמש

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

ה addEventListener מספק יכולת נוספת, עם זאת, באמצעות הפרמטר השלישי שלו. אתה יכול להשתמש בו כדי לשלוט בהפצת אירועים: הסדר שבו עוברים אירועים מאלמנטים להוריהם או לילדיהם.

הבנת הפצת אירועים ב-JavaScript

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

קרא הבא

על הסופר