Получение идентификатора элемента, который вызвал событие

Есть ли способ получить идентификатор элемента, который инициирует событие?

Я думаю что-то вроде:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

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

За исключением, конечно, что переменная testдолжна содержать идентификатор "aaa", если событие вызывается из первой формы, и "bbb"если событие вызывается из второй формы.

В 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);
});

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

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

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

event.target.id также дает атрибут id.

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

а также

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

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

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

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

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

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

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

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

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

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

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

Элемент, который сработал событие у нас есть в свойстве события

event.currentTarget

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

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

event.target

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

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

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

});

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

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

var $el = $(event.target);

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

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

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

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

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

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

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

<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 обернуто в a <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()возвращает все соответствующие потомки.

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

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

Это работает на высшем z-index чем в ответах выше:

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

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

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

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 здесь .

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

$(this).attr("id")

или

$(this).prop("id")

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

Обе эти работы,

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

а также

alert(this.id);

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

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

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

Я работаю с

JQuery Автозаполнение

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

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

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

HTML:

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