<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style>
.target {
width: 100px;
height: 100px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="target" id="first" aria-label="first"></div>
<p>Line Break</p>
<div class="target" id="second" aria-label="second"></div>
<div class="target" id="offscreen" aria-label="offscreen" style="position:relative; top:200vh"></div>
</body>
<script>
let event_log = [];
const log_handler =
e => event_log.push(`${e.type}[${e.target.tagName}#${e.target.id}]`);
const targets = document.querySelectorAll('.target');
for (let t of targets) {
t.addEventListener('click', log_handler);
t.addEventListener('mousedown', log_handler);
t.addEventListener('mousemove', log_handler);
t.addEventListener('mouseup', log_handler);
t.addEventListener('mouseenter', log_handler);
t.addEventListener('mouseleave', log_handler);
}
</script>
</html>
