Вы можете использовать (this) для ссылки на объект, который запустил функцию.

'this' является элементом ДОМ, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызываемой методами click, each, bind и т. д.

Здесь вы можете узнать больше: http://remysharp.com/2007/04/12/jquerys-this-demystified/

В jQuery event.target всегда относится к элементу, вызвавшему событие, где event - это параметр, переданный функции. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Также обратите внимание, что this также будет работать, но это не объект jQuery, поэтому, если вы хотите использовать на нем функцию jQuery, вы должны называть его $(this), например:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

Для справки попробуйте это! Оно работает!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

Я динамически генерирую таблицу из базы данных, получаю данные в формате JSON и помещаю их в таблицу. Каждая строка таблицы имеет уникальный ID, который необходим для дальнейших действий, поэтому при изменении DOM вам потребуется другой подход:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

Исходный элемент как объект jQuery должен быть получен через

var $el = $(event.target);

Это дает вам источник щелчка, а не элемент, которому также была назначена функция щелчка. Может быть полезно, когда событие щелчка находится на родительском объекте Например, событие щелчка в строке таблицы, и вам нужна ячейка, по которой щелкнули

$("tr").click(function(event){
    var $td = $(event.target);
});

Для всех событий, не ограничиваясь только jQuery, вы можете использовать

var target = event.target || event.srcElement;
var id = target.id

Если event.target терпит неудачу, он возвращается к event.srcElement для IE. Для пояснения приведенный выше код не требует jQuery, но также работает с jQuery.

Вы можете попробовать использовать:

$('*').live('click', function() {
 console.info(this.id);
 return false;
});

Хотя это упоминается в других сообщениях, я хотел объяснить это:

$(event.target).id не определен

$(event.target)[0].id дает атрибут id.

event.target.id также предоставляет атрибут id.

this.id дает атрибут id.

и

$(this).id не определен.

Различия, конечно, есть между объектами jQuery и объектами DOM. «id» - это свойство DOM, поэтому для его использования вы должны находиться в объекте элемента DOM.

(Это сбило меня с толку, так что, вероятно, сбило с толку кого-то другого)

this.element.attr("id") отлично работает в IE8.

Это работает на более высоком z-index, чем параметр события, упомянутый в ответах выше:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

Таким образом вы всегда получите id элемента (в данном примере li). Также при нажатии на дочерний элемент родительского ..

Оба они работают,

jQuery(this).attr("id");

и

alert(this.id);

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

Рабочий JSFiddle здесь.

В случае делегированных обработчиков событий, у вас может быть что-то вроде этого:

<ul>
    <li data-id = "1">
        <span>Item 1</span>
    </li>
    <li data-id = "2">
        <span>Item 2</span>
    </li>
    <li data-id = "3">
        <span>Item 3</span>
    </li>
    <li data-id = "4">
        <span>Item 4</span>
    </li>
    <li data-id = "5">
        <span>Item 5</span>
    </li>
</ul>

и ваш код JS вот так:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Скорее всего, вы обнаружите, что itemId - это undefined, поскольку содержимое LI обернуто в <span>, что означает, что <span>, вероятно, будет целью события. Вы можете обойти это с помощью небольшой проверки, например:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Или, если вы предпочитаете максимизировать удобочитаемость (а также избегать ненужного повторения вызовов оболочки jQuery):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

При использовании делегирования событий метод .is() неоценим для проверки того, что ваша цель события (среди прочего) действительно является тем, что вам нужно. Используйте .closest(selector) для поиска по дереву DOM и используйте .find(selector) (обычно в сочетании с .first(), как в .find(selector).first()) для поиска по нему. Вам не нужно использовать .first() при использовании .closest(), поскольку он возвращает только первый соответствующий элемент-предок, а .find() возвращает всех соответствующих потомков.

Просто используйте ссылку this

$(this).attr("id")

или же

$(this).prop("id")

Использование can Использовать событие .on

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

Элемент, инициировавший событие, мы имеем в свойстве мероприятие

event.currentTarget

Получаем объект Узел DOM, на который был установлен обработчик события.

Самый вложенный узел, который начал процесс пузырьков, у нас есть в

event.target

Объект события всегда является первым атрибутом обработчика события, например:

document.querySelector("someSelector").addEventListener(function(event){

 console.info(event.target);
 console.info(event.currentTarget);

});

Подробнее о делегировании событий Вы можете прочитать в http://maciejsikora.com/standard-events-vs-event-delegation/

Вы можете использовать эту функцию для получения идентификатора и значения измененного элемента (в моем примере я использовал тег Select.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.info("value changed" + String(val)+String(id));
                   }
               );

это работает с большинством типов элементов:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

Я работаю с

jQuery Autocomplete

Я попытался найти event, как описано выше, но когда срабатывает функция запроса, кажется, что он недоступен. Вместо этого я использовал this.element.attr("id") для получения идентификатора элемента, и, похоже, он работает нормально.

В случае Angular 7.x вы можете получить собственный элемент и его идентификатор или свойства.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.info(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

html:

<div class = "list-item" (click) = "myClickHandler($event)">...</div>

$(".classobj").click(function(e){
    console.info(e.currentTarget.id);
})

Чистый JS проще

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.info(test) 
}

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.info(test) 
}

<form class = "item" id = "aaa">
  <input class = "title"/>
</form>
<form class = "item" id = "bbb">
  <input class = "title"/>
</form>

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

<script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if (event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if ((event.target.id = "CommentsForOnAir") || (event.target.id = "CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class = "form-control" rows = "10" cols = "50" id = "CommentsForOnline" name = "CommentsForOnline" type = "text" size = "60" maxlength = "2000"></textarea>

Возможно, его можно было бы еще упростить, но вы поняли концепцию.