עד היום, רק בעזרת חפירות ארכיאולוגיות מתישות אפשר היה לגלות אילו אירועי JavaScript מחוברים לאלמנט.
הכל התחיל עם פרוץ ה-unobtrusive JavaScript. עד אז, כשרצית שיקרה משהו כשלוחצים על האלמנט עם העכבר, או כשלוחצים על מקש במקלדת, או כשהדף עולה – היית כותב מאפיין HTML בשם של האירוע (onClick(), onKeyDown()) ומגדיר לו איזו פונקציה להפעיל. מצד אחד זה היה נהדר, כי כך יכולת לראות בקוד ה-HTML את כל האירועים הקשורים לאלמנט. מצד שני, זה היה ערבוב של JS עם HTML (שעטנז!), וזה גם יצר מגבלה אם רצית שכמה דברים יקרו באותו אירוע.
ואז הגיע – גבירותיי ורבותיי – unobtrusive JavaScript! צורת הכתיבה החדשה הזו מאפשרת לכתוב את הארועים בקובץ חיצוני ולהצמיד לאותו אירוע מספר פונקציות. אולם אליה וקוץ בה: כעת אי אפשר לדעת אילו אירועים מוצמדים לאלמנט HTML-י מבלי לחקור את כל קבצי ה-JS הקשורים אליו, ולפעמים מדובר בקבצים רבים…
לאחרונה התגלה חוקר ארכיאולוגי המגלה את כל האירועים המוצמדים לאלמנט מסויים. לחוקר הזה קוראים Firebug! תחת טאב ה-HTML – היכן שנמצאים הטאבים Style, Computed, Layout – נוסף טאב חדש: Events. מעבר אליו מראה את אירועי ה-JS המוצמדים לאלמנט הנבחר, ולחיצה על האירוע מראה את הפונקציה המופעלת!
אפשר לקרוא על זה – ועל עוד פיצ’רים חדשים ומגניבים – כאן.
אתם לא יודעים כמה התגלית הזו שימחה אותי! מבחינתי זה מבשר את ימות המשיח 🙂
זה כבר מובנה בכלי הפיתוח של פיירפוקס. בחוקר האלמנטים אפשר לראות את האירועים שמוצמדים לאלמנט.
וואלה. אני כמעט אף פעם לא משתמשת בכל הפיתוח של פיירפוקס – אני כ”כ רגילה לפיירבאג.
אבל עכשיו בדקתי ואני לא מוצאת. אתה יכול להסביר לי היכן מוצאים את האירועים?
אולי זה עדיין בגרסת פיתוח, אני משתמש באורורה.
מתפריט ההקשר בוחרים „חקירת אלמנט” ואם יש אירוע שמקושר אליו מופיע סימן מתאים בסוף השורה.
http://i.imgur.com/jFgJsBS.png
תודה על צילום המסך!
ובאורורה קבור הכלב. עפ”י מה שכתוב ב-MDN, אירועי JS הם דבר המיוחד לאורורה (What’s new in Aurora? Event listeners are now visible in the Inspector). לנו, פשוטי העם*, לא נותר אלא להסתפק בפיירבאג :).
*אני יודעת שאין מניעה שאשתמש באורורה, אבל אני לא…