Obtaining the event object

Different types of events provide different properties. For example, the onclick event object contains:

　　event.target - the reference to clicked element. IE uses event.srcElement instead.

 

1. W3C way

element.onclick = function(event) {
 // process data from event
}

It is also possible to use a named function:

function doSomething(event) {
  // we've got the event
}

element.onclick = doSomething

It is possible to use a variable named event in markup event handlers:

<button onclick="alert(event)">See the event</button>

 

2. Internet Explorer way

Internet Explorer provides a global object window.event, which references the last event. And before IE9 there are no arguments in the handler.

So, it works like this:

// handler without arguments
element.onclick = function() {
  // window.event - is the event object
}

3. Cross-browser solution

element.onclick = function(event) {
    event = event || window.event

    // Now event is the event object in all browsers.
}

 

 

Both standards-compilant browsers and IE make is possible to access event variable in markup handlers.

<input type="button" onclick="alert(event.type)" value="Alert event type"/>