JQuery - Получение класса элемента через свойство event.target

У меня есть следующий код:

    <script type="text/javascript">
       $("*").click(function(event){
         var x = event.target;

         if (x.nodeName == "DIV"){                  
           alert(x.attr("class"));
         }

       })
    </script>

Это вызывает исключение 'undefined'... Есть ли другой способ получить класс элемента, который вызвал событие 'click'? Заранее благодарю вас!

Ответы

Ответ 1

jQuery предлагает некоторый синтаксический сахар, чтобы помочь с вашей проверкой - .is() позволяет проверять элемент на любой другой допустимый селектор:

var $target = event.target;
if ($target.is('div')){
  alert($target.attr('class'));
}

Есть несколько дальнейших изменений:

  • .click(handler) явно присваивается согласованным элементам (каждый отдельный элемент в вашем случае). Это добавляет накладные расходы; также обработчик не будет применяться к любому элементу, добавленному динамически после выполнения назначения обработчика. Вместо этого делегируйте обработчик, используя on()
  • реорганизуйте свою логику, чтобы вместо обработки каждого отдельного клика и проверки его вы могли сделать это применимым только к divs в первую очередь, изменив селектор на $('div')
  • полагайтесь на this, что в значительной степени условно

После всех этих изменений код становится меньше и читаем:

$('div').on('click', function() {
  alert($(this).attr('class'));
});

Ответ 2

event.target - объект DOM. Поэтому для использования методов jQuery вам необходимо преобразовать его в объект jQuery:

alert($(x).attr("class"));

В противном случае вы можете использовать свойство className, чтобы получить класс элемента:

alert(x.className);

Кстати, в вашем примере вы можете просто использовать ключевое слово this вместо event.target.