Touch & Mouse Events

HTML

<div id="target">

</div>

CSS

#target {
  width: 300px;
  height: 150px;
  background: white;
  border: 2px solid black;
}

JavaScript

function log(message) {
	var div = document.createElement("div");
  div.innerText = message;
	document.body.appendChild(div);
};

var target = document.getElementById("target");

["pointerdown", "pointerup", "pointerenter", "pointerleave"].forEach(function(eventName) {
	target.addEventListener(eventName, function(e) {
  console.dir(e);
  	log(`${eventName}: ${e}`);
  });
});