TD: event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Show Event properties</title>

<style>
table { border-collapse: collapse; }
thead { font-weight: bold; }
td { padding: 2px 10px 2px 10px; }

.odd { background-color: #efdfef; }
.even { background-color: #ffffff; }
</style>

<script>

function showEventProperties(e) {
console.log("entre");
function addCell(row, text) {
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(text));
}

var e = e || window.event;
document.getElementById('eventType').innerHTML = e.type;

var table = document.getElementById('tab');
table.innerHTML=""; //reset
var thead = table.createTHead();
var row = thead.insertRow(-1);
var lableList = ['#', 'Property', 'Value'];
var len = lableList.length;

for (var i=0; i<len; i++) {
addCell(row, lableList[i]);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

for (var p in e) {
row = tbody.insertRow(-1);
row.className = (row.rowIndex % 2)? 'odd':'even';
addCell(row, row.rowIndex);
addCell(row, p);
addCell(row, e[p]);
}

document.body.appendChild(table);
}

window.onload = function(event){
//showEventProperties(event);
}
</script>
</head>

<body>
<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
<table id="tab"></table>
<script>
var elem = document.getElementById('eventType').parentElement;
//elem.addEventListener("mouseenter", showEventProperties, false);
elem.addEventListener("mouseleave", showEventProperties, false);
//elem.addEventListener("mousemove", showEventProperties, false);
elem.addEventListener("click", showEventProperties, false);
</script>

</body>

</html>

Pages

event