<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
var sLog = '';
function go() {
var oTarget = document.getElementById('target');
do {
addEventHandlers('click', oTarget);
} while ((oTarget = oTarget.parentNode));
oEvent = document.createEvent('MouseEvent');
oEvent.initEvent('click', true, true);
var oTarget = document.getElementById('target');
oTarget.dispatchEvent(oEvent);
document.write('<code>' + sLog + '</code>');
}
function addEventHandlers(sEvent, oObject) {
oObject.addEventListener(sEvent, function (oEvent) {
logEvent(sEvent, 'bubbling', oEvent);
}, false);
oObject.addEventListener(sEvent, function (oEvent) {
logEvent(sEvent, 'capturing', oEvent);
}, true);
}
function logEvent(sEvent, sPhase, oEvent) {
var sEvent = sEvent + ' event (source: ' + oEvent.srcElement + ') ' + sPhase + ' -> ' + oEvent.currentTarget + '.';
sLog += sEvent + '<br/>';
console.log(sEvent);
}
</script>
</head>
<body onload="go()" style="position:absolute; margin:0; padding:0; width:100%; height: 100%;">
<div id="target">x</div>
</body>
</html>