jQuery - Ottenere classe di un elemento tramite la proprietà event.target

Question

Ho il seguente codice:

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

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

     }) 
    </script> 

Questo genera un'eccezione 'undefined' ... C'è qualche altro modo per ottenere la classe di un elemento che ha attivato l'evento "click"? Grazie in anticipo!

Answer 1

jQuery offre po 'di zucchero sintattico per aiutare con il vostro check - .is() consente di convalidare un elemento contro qualsiasi altra selettore valida:

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

Ci sono alcune ulteriori modifiche da considerare:

• .click(handler) è esplicitamente assegnato agli elementi corrispondenti (ogni singolo elemento nel tuo caso). Questo aggiunge un sovraccarico; anche il gestore non si applica a nessun elemento aggiunto dinamicamente dopo il l'assegnazione del gestore viene eseguita. Invece, delegato il gestore utilizzando on()
• rifattorizziamo la logica in modo che invece di gestire ogni singolo click e la convalida di esso si potrebbe rendere applicabile solo a div in primo luogo modificando il selettore $('div')
• si basano su this che è praticamente la convenzione

Dopo tutti questi cambiamenti il ​​codice diventa più piccolo e più leggibile:

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

Answer 2

event.target è un oggetto DOM. Quindi, per utilizzare metodi di jQuery è necessario convertirlo in oggetto jQuery:

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

In caso contrario, è possibile utilizzare la proprietà className per ottenere la classe dell'elemento:

alert(x.className); 

BTW, nel tuo esempio si può utilizzare semplicemente la parola chiave this anziché event.target.