Отримання ідентифікатора елемента, який викликав подію

Чи є спосіб отримати ідентифікатор елемента, що викликає подію?

Я думаю про щось на кшталт:

$(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>

За винятком звичайно, що var 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), наприклад, виклику методів клацання, кожного, прив'язки тощо.

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

Я динамічно генерую таблицю з бази даних, отримую дані в 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);

Це дає вам джерело кліку, а не елемент, якому також була призначена функція клацання. Може бути корисною, коли подія клацання знаходиться на батьківському об’єкті EG.а подія клацання в рядку таблиці, і вам потрібна клітинка, на яку було натиснуто

$("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 загорнуто в <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()повертає всіх відповідних нащадків.

Використовувати події Can Use .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")замість цього ідентифікатор елемента, і він, здається, працює добре.

У випадку з кутом 7.x ви можете отримати власний елемент та його id чи властивості.

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>