jQuery - 通过 event.target 属性获取元素的类名

Question

我有以下代码：

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

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

       })
    </script>

这会抛出一个“undefined”异常... 有没有其他方法可以获得触发“click”事件的元素的类？提前感谢！

- Johnny Bueti

---

请注意，您不必引用event.target ，您可以直接引用this 。if (this.nodeName == "DIV") alert( $(this).attr("class")); 可以翻译为：“请注意，您不必参考 event.target ，而是可以直接参考 this。if (this.nodeName == "DIV") alert( $(this).attr("class"));”。如果this的节点名称是DIV，则弹出它的类名。 - h2ooooooo

嗯，使用$（'*'）作为选择器时，在您的事件回调函数中应该使用event.stopPropagation()，这只是我的两分钱意见。 - A. Wolff

Answer 1

event.target 是一个DOM对象。因此，要使用jQuery方法，您必须将其转换为jQuery对象：

event.target 是一个DOM对象。因此，要使用jQuery方法，您必须将其转换为jQuery对象：

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

否则，您可以使用属性className来获取元素的类名：

alert(x.className);

顺便说一下，在你的示例中，你可以简单地使用this关键字代替event.target。

- VisioN

Answer 2

jQuery提供了一些语法糖来帮助你检查 - 通过.is()函数，你可以将一个元素与任何其他有效选择器进行验证：

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

你需要考虑以下几点：

• .click(handler) 明确地分配给匹配的元素(在您的情况下是每个单独的元素)。这增加了开销; 此外，处理程序不会应用于在执行处理程序分配之后动态添加的任何元素。相反，请使用on()委托处理程序。
• 重构逻辑，使其仅适用于 div，而不是处理每次单击并验证它。将选择器更改为 $('div')。
• 依赖于 this，这几乎是惯例。

所有这些更改后，代码变得更小更易读：

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

- Oleg