Данный материал навеян довольно большим числом запросов о реализации подобного метода, а также отсутствием внятного решения в Интернете.

Итак, для чего именно нужен данный метод мы касаться не будем, ибо вариантов может быть много, и сразу перейдем к реализации. Подключаем jQuery. Повесим на событие "click" по всей области body анонимную функцию, принимающую аргумент event. В этом объекте и будет содержаться вся информация о событии. Чтобы получить объект, нужно обратиться к свойству event.target. Чтобы получить id объекта — event.target.id 

<script>
$(document).ready(function($){
	$('body').on("click",function(event){
		alert(event.target.id);
	});
});
</script>

На практике лучше вешать обработчик событий не на весь body, а на конкретный элемент, который вам потребуется(на который будете кликать).

Кроме того, объект event также содержит другие весьма полезные данные, например:

  • event.target — объект, в котором сработал обработчик события
  • event.target.id — его id
  • event.target.className — его класс
  • event.type — тип события, у нас установлен click
  • event.which — какая кнопка была нажата
  • event.clientX / event.clientY (pageX/pageY)- координаты мышки в момент клика
  • event.timeStamp - используется для обозначения момента создания данного события. Время расчитывается в мс начиная с даты 1 января 1790 г. по Гринвичу
  • event.preventDefault() - отмена события по умолчанию (например, можно отменить для некоторой ссылки событие перехода на новую страницу, указанную в 'href').
click me!

Исходный код желтого блока выше:

<div style="margin:50px; padding:20px; background:blanchedalmond; width:700px;" id="check">click me!</div>
<script>
$(document).ready(function($){
	$('body').on("click",function(event){
		$('#check').html('clientX: '+event.clientX+ '<br> clientY: '+event.clientY+ '<br> timeStamp: ' + event.timeStamp + '<br> event.target.className: ' + event.target.className + '<br> event.target.id: ' + event.target.id );
	});
});
</script>