handleEvent

by Sasabee

HTML

<body>
	<div class="box"></div>
</body>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	max-height: 466px;
}
.box {
	width: 200px;
	height: 200px;
	background-color: blue;
}

JavaScript

const el = document.querySelector('.box');

const clickCallback = ()=>{
	const startTime = performance.now();
	const obj = { handleEvent: mouseLeaveCallback, arg: startTime };
	el.addEventListener('mouseleave', obj);
};

const mouseLeaveCallback = function() {
	const endTime = performance.now();
	el.removeEventListener('mouseleave', this);
	alert(`${endTime - this.arg} ms`);
};

el.addEventListener('click', clickCallback);