JavaScript свойство Event.timeStamp

Определение и применение

JavaScript свойство timeStamp объекта Event возвращает разницу в миллисекундах между тем моментом, когда браузер создал событие и 00:00:00 1 января 1970 года (Unix-время).

Обращаю Ваше внимание на то, что это свойство работает только в том случае, если система событий поддерживает его для конкретного события.

В более новых реализациях значением является DOMHighResTimeStamp с точностью до 5 микросекунд (0,005 МС). В старых реализациях это значение является DOMTimeStamp с точностью до миллисекунды.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`timeStamp`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

event.timeStamp

Версия JavaScript

Document Object Model (DOM) Level 2 Events

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства timeStamp объекта Event</title>
	</head>
	<body>
		<div>
		        <button>Нажми на меня</button>
		        <p></p>
		</div>
		<script>
	const button = document.querySelector( "button" ), // находим первый элемент <div> в документе
              p = document.querySelector( "p" ); // находим первый элемент <div> в документе
	let last,  // объявляем две пустые переменные
            difference; 
	button.addEventListener("click", showDifference); // регистрируем обработчик события "click" для элемента <button>

	function showDifference( event ) {
	  if ( last ) { // если переменная содержит значение получаем разницу
	    difference = event.timeStamp - last;
	    p.innerHTML += "Время с момента последнего события (миллисекунд): " + difference + "<br>" ;
	  } else {
	    p.innerHTML = "Нажми еще, пожалуйста.<br>";
	  }
	  last = event.timeStamp;
	}
		</script>
	</body>
</html>

В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент <button> и элемент <p> в документе. С помощью метода addEventListener() зарегестрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для элемента <button>.

При нажатии на кнопку мы запускаем обработчик события, который записывает текущее значение разницы в миллисекундах между тем моментом, когда браузер создал событие и полуночи 1 января 1970 года (значение свойства timeStamp). При последующих кликах по кнопке это число будет вычитаться из текущего значения свойства timeStamp.

С помощью свойства innerHTML мы вставляем содержимое в элемент <p>. Обратите внимание, что после первого нажатия вставляется только текстовое содержимое с просьбой о повторном нажатии.

Результат нашего примера:

Пример использования JavaScript свойства timeStamp объекта Event

JavaScript Event