EventListener בשפת JavaScript הוא פרוצדורה אשר מקשיבה לאירועים מוגדרים מראש אשר קורים בתוכנית שלנו ומגיבה אליהם. במאמר זה נשתמש ב-EventListener על מנת לתת פונקציונליות לכפתור בדף ה-HTML שלנו
במסגרת לימודי, כאשר למדתי CSS נתקלתי בבעיה יפה.
תארו לכם מצב שבו התבקשתם ליצור קובייה שכאשר נלחץ עליה, תתבצע עליה טרנזיסציה שתיקח אותה למיקום שונה בדף בכל פעם בצורה ריבועית:
ובכן, כמובן שבשפת js יש מספר פתרונות לבעיה זו,
במאמר זה ניצור התנהגות זו באמצעות EventListener.
קוד ה-HTML ו-CSS
ראשית ניצור עמוד HTML פשוט ואת קובץ ה-CSS שלו.
בדף ה-HTML ניצור div וניתן לו את המזהה main, כאשר בתוכו נאכלס div נוסף,
את ה-div הפנימי שלנו נכניס לקלאס בשם box:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8" />
<title>Moving Cube</title>
</head>
<body>
<div id="main">
<div class="box"></div>
</div>
</body>
</html>
קובץ ה-CSS שלנו יהיה קצת יותר מעניין מאשר דף ה-HTML.
עלינו לכתוב אותו כך שבכל קליק על הקובייה שלנו – נחיל עליה סגנון עיצובי נוסף.
כלומר שעלינו לכתוב גיליון עיצוב לכל שלב של הטרנזיסציה (שורות 24-38), שימו לב כי את הטרנזיסציה ביצענו על המאפיין margin:
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}
div#main {
height: 50%;
display: flex;
flex-wrap: nowrap;
}
div#main .box {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
background: red;
transition: margin 1s;
}
div#main .box.TranslateIt1 {
margin-left: calc(100% - 100px);
}
div#main .box.TranslateIt2 {
margin-top: calc(50% - 100px);
}
div#main .box.TranslateIt3 {
margin-left: 0%;
}
div#main .box.TranslateIt4 {
margin-top: 0%;
}
נתנו את השמות TranslateIt1/2/3/4 לקלאסים שיצרנו, בהמשך ניעזר בעובדה זאת.
כמו כן, יש לשים לב כי את הקלאסים האלה לא הוספנו עדיין בדף ה-HTML – זאת משום שאנחנו מעוניינים להחיל כל אחד מהם בזמן שלו.
שימו לב כי המשמעות של החישוב בשורות 25 ו-29 הוא לתת את הערך הרצוי פחות רוחב הקובייה.
- TranslateIt1 – הקובייה תזוז לקצה הימני של ה-flex –
על ידי שימוש במאפיין margin-left. - TranslateIt2– הקובייה תרד ל-50% (פחות גובה הקובייה) מהגובה הנוכחי –
על ידי שימוש במאפיין margin-top. - TranslateIt3– הערך של margin-left יחזור ל-0%.
- TranslateIt4– הערך של margin-top יחזור ל-0%.
שימוש ב-EventListener
כעת, מה שנשאר לנו זה להפוך את הקובייה שלנו לפונקציונלית, כלומר שתגיב לקליק.
לשם כך נשתמש ב-EventListener אשר "יאזין" לקליקים על הקובייה.
לכן, בכל פעם שנלחץ על הקובייה ניכנס לתוך פונקציה אשר נכתוב לשם כך.
ראשית נסביר את התחביר הנכון להוספת EventListener לאלמנט HTML.
על מנת לגשת לאלמנט ה-HTML הרצוי נשתמש ב-querySelector:
const button = document.querySelector('.box');
למתודה querySelector נתנו את הערך 'box.' משום שזה השם שנתנו לקלאס של ה-div הפנימי.
זהו האלמנט שלו אנו רוצים להוסיף את ה-EventListener, כאשר התחביר להוספה הוא כדלקמן:
button.addEventListener('click', <function>);
המתודה addEventListener מקבלת שני פרמטרים באופן אופציונלי.
שימו לב כי קיימות לפונקציה זו העמסות נוספות אשר נבאר בהמשך.
על ידי שימוש במתודה זו, למעשה הוספנו מאזין לקובייה האדומה,
כאשר תפקידו של המאזין יהיה להגיב לאירוע של לחיצה על הקובייה, נוכל להסביר זאת באמצעות תרשים זרימה:
קצת על אירועי מערכת ב-JavaScript
קיימים בשפת JavaScript אירועים רבים שאליהם נוכל להתייחס, במקרה של התוכנית שלנו אנו מתייחסים לאירוע של הקשה עם העכבר,
אולם קיימים אירועים נוספים רבים כגון ריחוף מעל אלמנט מסוים, גלילת העכבר, לחיצה כפולה ועוד שלל אירועים.
* תוכלו למצוא את רשימת האירועים המלאה בקישור הבא – https://developer.mozilla.org/en-US/docs/Web/Events#event_listing
קוד ה-JavaScript
אם כך, על מנת לפתור את הבעיה שלנו באמצעות EventListener, את קוד ה-js שלנו נוכל לכתוב כך:
let x = 1;
const button = document.querySelector('.box');
button.addEventListener('click', _ => {
button.classList.add('TranslateIt' + x);
if (x == 4) {
for (i = 0; i < 4; i++) {
button.classList.remove('TranslateIt' + x);
x -= 1;
}
}
x++;
});
- בשורה 1 הצהרנו על משתנה let בשם x אשר מחזיק את הערך – 1, שימו לב לכך.
- בשורה 2 הצהרנו על משתנה שמתייחס לאלמנט ה-HTML שלנו (הקובייה האדומה).
- בשורה 4 הוספנו את המאזין, שלחנו אירוע מסוג "click" בפרמטר הראשון של המתודה EventListener.
- במקום לשלוח פונקציה כפרמטר שני – השתמשנו בפונקציית Fat Arrow (דומה ל-Lambda בשפות תכנות אחרות).
כלומר שבמקום שנזין שם של פונקציה בתור פרמטר, כתבנו פונקציה אנונימית שלא מחזירה כלום – " ;{<function>} <= _ ".
בכל פעם שהתוכנית תיכנס לפונקציה שלנו, נחיל מחלקה על האלמנט (שורה 5) ונעלה את הערך של x ב-1 (שורה 12).
בקובץ ה-CSS יצרנו ארבע קלאסים שנוכל להיעזר בשמות שנתנו להם לשם פעולה זו.
השתמשנו בערך של x על מנת להתייחס לקלאס הנכון לפי הסדר:
- בקליק הראשון נוסיף את מחלקת TranslateIt1 לאלמנט.
- בקליק השני TranslateIt2.
- בקליק השלישי את TranslateIt3.
- בקליק הרביעי והאחרון נוסיף את TranslateIt4.
כאשר הערך של x יהיה 4 נסיר את כל המחלקות שהוספנו על ידי שימוש בלולאה.
במילים אחרות ניתן להסביר זאת כך שכאשר הקובייה חוזרת לעמדתה הראשונית נוכל להסיר את כל המחלקות שהוספנו לה,
וזאת משום העובדה שכבר אין לנו צורך בהם יותר –
שימו לב שבכל איטרציה של הלולאה הורדנו את הערך של x ב-1, כי אם x יחזור להיות 1 הרצף יתחיל מההתחלה.
המאפיין classList
שימו לב כי את הוספת הקלאס ביצענו על ידי שימוש ב-()classList.add,
לכל אלמנט יש רשימה של קלאסים אשר הוא רשום אליהם (classList), במקרה שלנו השתמשנו במתודה add,
אך קיימות מתודות נוספות:
- ()add – במתודה זו נשתמש על מנת להוסיף מחלקה לרשימת המחלקות.
- ()remove – ב-remove נשתמש כדי להסיר מחלקה מהרשימה.
- ()replace – החלפת מחלקה תתבצע על ידי שימוש במתודה זו.
- ()toggle – בורר דו מצבי זה יוסיף מחלקה לרשימה בפעם הראשונה שיחול האירוע ויסיר אותה בפעם הבאה
כך שנוכל לראות בו מעין בורר On/Off שיתאים לנו למצבים מסוימים.
המשמעות היא שאם לדוגמא היינו משתמשים ב-add אך לא מסירים את המחלקות כאשר x מגיע ל-4 –
הקובייה לא הייתה יכולה לצאת לסיבוב חדש.
כמו כן, את התוצאה שהשגנו, היינו משיגים גם אם היינו משתמשים ב-toggle, אך במקרה זה לו היינו מוותרים על הסרת המחלקות –
כאשר היינו מגיעים לקליק הרביעי, היינו זקוקים לארבעה קליקים נוספים כדי להתחיל סיבוב חדש.
כעת, אם תריצו את התוכנית, תוכלו לקבל את התוצאה כדלקמן:
העמסות נוספות למתודה addEventListener
למתודה זו קיימות העמסות נוספות:
addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture);
בתוכנית שלמעלה השתמשנו בהעמסה הראשונה והסברנו אותה לפרטים, כעת נתייחס לשני האחרות.
בהעמסה השנייה תראו כי ניתן להוסיף פרמטר שלישי בשם – options.
אלו הן האפשרויות שניתן להוסיף למאזין:
- capture – ערך בוליאני אשר אומר אם אירועים מסוג זה נשלחים אל המאזין לפני שהם נשלחים אל מטרת האירוע.
אם ניתן true כערך – זה עלול לשנות לנו את סדר פעולת השליחה.
באופן דיפולטיבי הערך אשר ניתן ל-capture הוא false.
- once – זהו ערך בוליאני אשר אומר למאזין אם עליו לעורר את הפונקציה פעם אחת בלבד כאשר מוסיפים את ה-EventListener.
המשמעות של הדבר היא שאם ניתן true כערך – כאשר נוסיף מאזין לאלמנט שלנו, הפונקציה תרוץ פעם אחת, ומיד יוסר המאזין מהאלמנט לאחר מכן.
כך שכצפוי, גם כאן, הערך הדיפולטיבי הוא false.
- passive – ערך בוליאני נוסף. אם הערך הוא true, הפונקציה שמכיל המאזין לעולם לא תוכל לקרוא למתודה ()preventDefault –
כלומר שאם מאזין פסיבי יקרא למתודה זו, כל מה שיקרה זה שתישלח אזהרה ל-console.
הערך הדיפולטיבי הוא false, כאשר בדפדפנים שהם לא Safari או Internet Explorer – הערך הדיפולטיבי יהיה true עבור אירועים מסוג:
wheel, mousewheel, touchstart ו-touchmove.
- signal – המאזין יוסר מהאלמנט כאשר נשלח אובייקט AbortSignal – כלומר שכשנשתמש בפונקציה ()abort.
אם לא הגדרנו אחרת, המאזין מגיע ללא אובייקט כזה.
ההעמסה השלישית מקבלת בתור פרמטר שלישי במקום האפשרויות – את useCapture.
זהו ערך בוליאני אשר נוכל להשתמש בו באופן יחסית דומה לאפשרות capture, מדובר בסדר הפעולות ב-DOM.
תוכלו להיכנס לקישור בתחתית המאמר להרחיב על כך.
סיכום
לסיכום ניתן לומר כי EventListener הוא קונספט חשוב ושימושי אשר נוכל להשתמש בו על מנת להגיב לאירועים אשר קורים בתוכנית שלנו בזמן אמת.
ראינו כיצד ביכולתנו להשתמש במאזין על מנת להחיל טרנזיסציה שונה בכל קליק על האלמנט שלנו' אך אם תתרגלו את הנושא ותמשיכו להעמיק בו תגלו כי נושא האירועים ב-js או בשפות תכנות בכלל – הוא הרבה יותר עמוק מכך.
לקריאה מורחבת על נושא ה-EventListener תוכלו להיכנס לקישור הבא – https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.
