Q507 How can I capture and handle all "click" events in a document?

You are here: irt.org | FAQ | JavaScript | Misc | Q507 [ previous next ]

Try the following, which first captures all click events in the window, and then the document. If you don't need to pass the click event down to any other event handlers then comment out all the window.routeEvent() function calls:

<script language="JavaScript"><!--
function windowEvent(e) {
   alert ("The window got an event of type: " + e.type);
   window.routeEvent(e);
   return true;
}

function documentEvent(e) {
   alert ("The document got an event of type: " + e.type);
   window.routeEvent(e);
   return true;
}

window.captureEvents(Event.CLICK);
window.onclick=windowEvent;

document.captureEvents(Event.CLICK);
document.onclick=documentEvent;
//--></script>

<a href="#" onClick="alert('The link got an event of type: ' + event.type)">test</a>

Whereas Netscape Navigator 4 passes the event handler down the object hiearchy, from the top object (window) down (through document) to the actual object causing the event (the link), Internet Explorer 4 bubbles up the object hierarchy (starting with the link) and then ending up with the window:

<html>
<head>
<script language="JavaScript"><!--
function bodyEvent() {
   alert ("The body got an event of type: " + window.event.type);
}
//--></script>
</head>
<body onClick="bodyEvent()">
<a href="#" onClick="alert('The link got an event of type: ' + event.type)">test</a>
</body>