Attualmente sto cercando di scrivere del JavaScript per ottenere l'attributo della classe che è stata cliccata. So che per farlo nel modo corretto, dovrei usare un listener di eventi. Il mio codice è il seguente:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Mi aspettavo di ottenere una casella di avviso ogni volta che cliccavo su una delle classi per dirmi l'attributo, ma purtroppo questo non funziona. Qualcuno può aiutarmi per favore?
(Nota - posso farlo facilmente in jQuery
ma NON vorrei usarlo)
Questo dovrebbe funzionare. getElementsByClassName
restituisce un array oggetto simile ad un array (vedi edit) degli elementi che corrispondono ai criteri.
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
jQuery fa la parte del looping per te, che devi fare in semplice JavaScript.
Se avete il supporto ES6 potete sostituire l'ultima riga con:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Nota: I vecchi browser (come IE6, IE7, IE8) non supportano getElementsByClassName
e quindi restituiscono undefined
.
EDIT : Correzione
getElementsByClassName
non restituisce un array, ma una HTMLCollection nella maggior parte, o una NodeList in alcuni browser (Mozilla ref). Entrambi questi tipi sono Array-Like, (nel senso che hanno una proprietà di lunghezza e gli oggetti sono accessibili tramite il loro indice), ma non sono strettamente un Array o ereditati da un Array. (il che significa che altri metodi che possono essere eseguiti su un Array non possono essere eseguiti su questi tipi)
Grazie all'utente @Nemo per avermelo fatto notare e avermi fatto scavare per capire bene.
Questo è stato modificato per consentire ai figli della classe di destinazione di attivare gli eventi. Vedi il fondo della risposta per i dettagli.
Una risposta alternativa per aggiungere un ascoltatore di eventi a una classe in cui gli elementi vengono aggiunti e rimossi frequentemente. Questo è ispirato a jQuery's on
funzione in cui è possibile passare un selettore per un elemento figlio su cui l'evento è in ascolto.
var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children
base.addEventListener('click', function(event) {
// find the closest parent of the event target that
// matches the selector
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// handle class event
}
});
Fiddle:
Questo ascolterà i click sui figli dell'elemento base
e se l'obiettivo di un click ha un genitore che corrisponde al selettore, l'evento di classe sarà gestito. Si possono aggiungere e rimuovere elementi come si vuole senza dover aggiungere altri ascoltatori di click ai singoli elementi. Questo li catturerà tutti anche per gli elementi aggiunti dopo che questo ascoltatore è stato aggiunto, proprio come la funzionalità di jQuery (che immagino sia in qualche modo simile sotto il cofano).
Questo dipende dalla propagazione degli eventi, quindi se si stopPropagation
sull'evento da qualche altra parte, questo potrebbe non funzionare. Inoltre, la funzione closest
ha alcuni problemi di compatibilità con IE apparentemente (cosa non lo fa?).
Questo potrebbe essere trasformato in una funzione se avete bisogno di fare questo tipo di azione di ascolto ripetutamente, come
function addChildEventListener(base, eventName, selector, handler) {
base.addEventListener(eventName, function(event) {
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// passes the event to the handler and sets `this`
// in the handler as the closest parent matching the
// selector from the target element of the event
handler.call(closest, event);
}
});
}
=========================================
EDIT: Questo post originariamente usava la funzione matches
per gli elementi DOM sul target dell'evento, ma questo limitava i target degli eventi solo alla classe diretta. È stato invece aggiornato per usare la funzione closest
, permettendo agli eventi sui figli della classe desiderata di innescare anche gli eventi. Il codice originale di matches
può essere trovato nel fiddle originale:
https://jsfiddle.net/u6oje7af/23/
Puoi usare il codice qui sotto:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);