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

【问题标题】：jQuery - Getting class of an element through the event.target propertyjQuery - 通过 event.target 属性获取元素的类
【发布时间】：2012-10-18 17:54:55
【问题描述】：

我有以下代码：

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

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

       })
    </script>

这会引发“未定义”异常...有没有其他方法可以获取触发“点击”事件的元素的类？提前谢谢！

【问题讨论】：

请注意，您不必参考event.target，但您也可以参考this。 if (this.nodeName == "DIV") alert( $(this).attr("class"));
好吧，使用 $('*') 作为选择器，你应该在你的事件回调函数中使用 event.stopPropagation()，只要我的 2 美分。

标签： javascript jquery css class

【解决方案1】：

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

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

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

alert(x.className);

顺便说一句，在您的示例中，您可以简单地使用 this 关键字而不是 event.target。

【讨论】：

【解决方案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'));
});

【讨论】：