Как получить ID элемента с помощью jQuery

В процессе работы бывает, что требуется получить ID элемента jQuery по которому кликнул пользователь. На странице есть несколько таких элементов с одинаковыми классами, но с разными ID. В этом случае обработчик события клика вешается на общий класс, а не на каждый элемент.  Как в этом случае получить ID? Какой от отдельной функции в JQuery не предусмотрено, но это можно сделать и другими способами.

Способ 1

Использование функции .attr() — возвращает или изменяет значение атрибутов у выбранных элементов страницы.

$(document).ready(function(){
    $('.button').click(function() {
    var clickId = $(this).attr('id');
  });
});

Способ 2

Использование функции .prop() — Возвращает или изменяет значение свойств выбранных элементов страницы.

$(document).ready(function(){
    $('button').click(function(){
        var clickId = $(this).prop('id');
        alert(clickId);
    });
});

Замечание .prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr(), поэтому в нашем случае использовать эту функцию не совсем правильно

Способ 3

Использование указателя this, который будет указывать не на объект типа jQuery, а на DOM-аналог этого объекта.

$(document).ready(function(){
    $('.button').click(function(){
        var clickId = this.id;
    });
});

Способ 4

Использование объекта event, который содержит данные о произошедшем событии.

$(document).ready(function() {
    $(".square").click(function(event) {
        var clickId = event.target.id;
    });
});