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

irt.org | Knowledge Base | JavaScript | Misc | Q507 [ previous next ]

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

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>

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.