jQuery - Bắt lớp của một phần tử thông qua thuộc tính event.target

Question

Tôi có đoạn mã sau:

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

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

     }) 
    </script> 

này ném một ngoại lệ 'undefined' ... Có cách nào khác để có được lớp của một yếu tố nào đã kích hoạt sự kiện 'nhấp'? Cảm ơn bạn trước!

Answer 1

jQuery cung cấp một số đường cú pháp để giúp kiểm tra của bạn - .is() cho phép bạn để xác nhận một yếu tố chống lại bất kỳ chọn hợp lệ khác:

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

Có một số thay đổi hơn nữa để xem xét:

• .click(handler) được chỉ định rõ ràng cho các phần tử phù hợp (mọi phần tử trong trường hợp của bạn). Điều này cho biết thêm chi phí; cũng là trình xử lý sẽ không áp dụng cho bất kỳ phần tử nào được thêm động sau khi gán nhiệm vụ xử lý. Thay vào đó, đại biểu xử lý bằng cách sử dụng on()
• refactor logic của bạn để thay vì xử lý mỗi nhấp chuột duy nhất và xác nhận nó, bạn có thể làm cho nó chỉ áp dụng cho các div ở nơi đầu tiên bằng cách thay đổi selector để $('div')
• dựa vào this đó là khá nhiều công ước

Sau khi tất cả những thay đổi mã trở nên nhỏ hơn và dễ đọc hơn:

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

Answer 2

event.target là đối tượng DOM. Vì vậy, để sử dụng phương pháp jQuery bạn phải chuyển nó sang đối tượng jQuery:

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

Nếu không, bạn có thể sử dụng tài sản className để có được những lớp học của nguyên tố này:

alert(x.className); 

BTW, trong ví dụ của bạn, bạn có thể chỉ cần sử dụng this từ khóa thay vì event.target.