<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
float: left;
height: 300px;
width: 400px;
margin: 0;
background-color: orange;
}
span {
display: block;
text-align: center;
height: 50%;
width: 50%;
margin: 75px 25% 75px 25%;
padding: 10%;
box-sizing: border-box;
background-color: lightsteelblue;
}
p {
float: left;
height: 300px;
width: 400px;
margin: 0;
background-color: chartreuse;
}
</style>
<script src="jquery.js"></script>
<script>
function notify(e) {
var current = e.currentTarget;
var target = e.target;
var join = Array.prototype.join;
// Element.classList is not an Array but just an Object
var currentClasses = join.call(current.classList || [], ' ');
var targetClasses = join.call(target.classList || [], ' ');
console.log(current.tagName, currentClasses, 'from', target.tagName, targetClasses);
// Vanilla JS:
// e = e || window.event; // Needed for IE, which does not pass the event to handlers.
// var target = e.target || e.srcElement; // srcElement for IE, target for every other browser,
// // Defeat Safari bug: if an event takes place on an element that contains
// // text, this text node, and not the element, becomes the target of the
// // event. Therefore we check if the target's nodeType is 3, a text node.
// // If it is we move to its parent node, the HTML element.
// if (target.nodeType == 3) {
// target = target.parentNode;
// }
// console.log(e, target.tagName, target.classList, target.nodeType);
}
$(function () {
$('body').find('*').click(notify);
});
</script>
</head>
<body>
<div class="foo">
Text
<span class="bar">
<a href="#">The quick brown fox jumps over the lazy dog.</a>
</span>
</div>
<p>How razorback-jumping frogs can level six piqued gymnasts!</p>
</body>
</html>