אירועים ו-Event Listeners

אירועים הם פעולות המתרחשות בדף האינטרנט שניתן להגיב אליהן באמצעות JavaScript. Event Listeners הם פונקציות המגיבות לאירועים אלו.

הוספת Event Listener

    document.getElementById('myButton').addEventListener('click', function() {
      alert('Button clicked!');
    });
    

בדוגמה זו, מאזין לאירוע click נוסף לכפתור עם ID myButton. כאשר הכפתור נלחץ, מופיעה התראה.

הסרת Event Listener

    function showAlert() {
      alert('Button clicked!');
    }

    document.getElementById('myButton').addEventListener('click', showAlert);
    document.getElementById('myButton').removeEventListener('click', showAlert);
    

בדוגמה זו, הוספנו ואז הסרנו את המאזין לאירוע click באמצעות פונקציה נפרדת בשם showAlert.

אירועים נפוצים

• click: נלחץ על אלמנט
• mouseover: העכבר עבר מעל אלמנט
• mouseout: העכבר יצא מאלמנט
• keydown: מקש נלחץ
• keyup: מקש שוחרר

Event Object

    document.getElementById('myButton').addEventListener('click', function(event) {
      console.log('Button clicked at coordinates: ' + event.clientX + ', ' + event.clientY);
    });
    

באמצעות Event Object ניתן לקבל מידע נוסף על האירוע, כמו מיקום לחיצה בעכבר.