Javascript-Äquivalent von jQuery Onclick

Question

Wie sollte ich meinen Code konstruieren, um die Wirkung dieser jQuery

var divQuery = $('.html5gallery-thumbs-0').children(); 
    divQuery.on('click', function() {...} 

zu bekommen dachte ich, es so etwas wie dieses:

var divQuery = document.getELementsByClassName('html5gallery-thumbs-0'); 
     divQuery.onclick = function (elem) { 
//this.style.display = 'none' 
// OR 
//elem.style.display = 'none' 

} 

Element zum Clicket Objekt verweisen soll Recht? Oder es sollte das Schlüsselwort this sein. Ich möchte javascript lernen, weil jQuery schließlich nur eine Bibliothek ist. Vielen Dank im Voraus!

Answer 1

Erweiterung Art Nutzer beantworten mit zwei anderen Ansätzen:

Mit den neuesten und größten JS-Funktionen:

const divQuery = document.querySelector('.a'); 
divQuery.childNodes.forEach(v => { 
    v.addEventListener('click', function() { 
    console.log(this.textContent); 
    }) 
}); 

Und ein wirklich alten (die IE und anderen älteren Browser unterstützt):

const divQuery = document.getElementsByClassName('a')[0]; 
    [].forEach.call(divQuery.children, function(v){ 
    v.addEventListener('click', function() { 
    console.log(this.textContent); 
    }) 
}) 

Answer 2

Fangen Sie einfach die Eltern mit querySelector und bekommen Sie es Kinder mit children Funktion. Dann - iteriere darüber und binde den Hörer.

const divQuery = document.querySelector('.a'); 
 

 
Array.from(divQuery.children).forEach(v => { 
 
    return v.addEventListener('click', function() { 
 
    console.log(this.textContent); 
 
    }) 
 
})

<div class="a"> 
 
    <div>child1</div> 
 
    <div>child2</div> 
 
</div>

Answer 3

was Sie tun fast richtig. Aber wenn Sie Elemente nach Klassen finden, erhalten Sie eine Sammlung von Objekten. Wählen Sie zuerst den Index und dann die Onclick-Funktion. Wie unten.

var divQuery = document.getELementsByClassName('html5gallery-thumbs-0'); 
     divQuery[0].onclick = function (elem) { 
//this.style.display = 'none' 
// OR 
//elem.style.display = 'none' 

}