Event Objects

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

Listener gets an Event Object as an argurment

var myButton = document.getElementById("buttonID");


myButton.addEventListener("click", function( ev ) {
        alert( "got a button press!");
    }
);

Event Object 

the html element that generated the event

Event.target 

Of course, we can access all of its prperties

• Style
• Id
• etc....

element.addEventListener("click", function( ev ) {
        var targetElement = ev.target;
        alert( "The value of the element clicked is " 
            + targetElement.value);
    }
);

MouseEvent Object 

for "click", "mousedown", "mousemove", "mouseup"

MouseEvent properties include

• MouseEvent.clientX  - X position in window
• MouseEvent.clientY  - Y position in window
• MouseEvent.offsetX - X position in target
• MouseEvent.offsetY - Y position in target

Different types of Event Objects