在集合上添加事件监听器

Question

if I have a collection that has the same class, how can I add an onclick event listener without effecting each item with that class.

<div class = "overlay">etc. etc.</div>
<div class = "overlay">etc. etc.</div>
<div class = "overlay">etc. etc.</div>
<div class = "overlay">etc. etc.</div>

I'd want to run the following but only effect the one I click...not all of them with the classname 'overlay':

x = document.getElementsByClassName("overlay")
x.addEventListener("click", function() { this.addClassName("hide"); } );

Answer 1

Try it:

x = document.getElementsByClassName("overlay");
for(var i = 0; i < x.length; i++){
    x[i].addEventListener("click", function() { this.classList.add("hide"); })
}