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

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

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

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

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

17 ответов


в 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' это дом элемент, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызывается щелчком, each, bind и т. д. методы.

здесь вы можете узнать больше: 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


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

var $el = $(event.target);

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

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

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

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

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

<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() возвращает все подходящие потомки.


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

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+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 здесь.


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

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

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

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


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


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

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

и

alert(this.id);

просто использовать this ссылка

$(this).attr("id")

или

$(this).prop("id")

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

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