Cross-Browser.com

An inline event handler is one that is assigned via an HTML attribute.

<a href='#' onclick='handleClick()'>click me</a>
    

You assign a string of Javascript to the attribute and, in effect, here's what the browser does:

a_element.onclick = function (event) {
  handleClick();
}
    

Whatever string you assign to the attribute becomes the body of an anonymous function. That function is assigned to the element's event handler property.

The anonymous function has one parameter, event. The string of Javascript you assign to the attribute can reference this parameter. This is how you would pass the event argument to the handleClick function:

<a href='#' onclick='handleClick(event)'>click me</a>
    

You can think of that as becoming the following. Note that in IE the Event object is not passed to the handler. However, this works in IE because the event identifier referenced in the string of Javascript is associated with the window.event object, which is part of the IE propietary model.

a_element.onclick = function (event) {
  handleClick(event);
}
    

Sometimes you want to pass a reference to the object clicked to the handler. You do that like this:

<a href='#' onclick='handleClick(this)'>click me</a>
    

Why does this work? Look at it like this:

a_element.onclick = function (event) {
  handleClick(this);
}
    

Within the function a_element.onclick , this references a_element.

Finally let me say... try not to use inline handlers. It is good practise to keep all script out of the HTML (separation of behavior and structure).

As you saw above, an inline event handler is just a string of Javascript which becomes the body of an anonymous function which is assigned to the element's event handler property. In general, it is better to directly use event handler properties instead of using inline handlers. There are a wide variety of event handler properties, for example onclick, onmousemove, onchange, onsubmit, etc.

The following gets a reference to some element and assigns a function reference to the element's onclick handler.

window.onload = function () {
  var ele = document.getElementById('someElementID');
  if (ele) {
    ele.onclick = handleClick;
  }
};
function handleClick(e) {
  e = e || window.event;
}
    

Note that handleClick will be called as a method of the element object. This means the this keyword will reference the element object. Also note that the Event object is passed as an argument to handleClick, but not in IE. In IE the Event object is available as window.event.

Returning false from the handler will cancel the current default action.