多个元素的AddEventListener不适用于“focus”事件

Question

I'm guessing I have a basic error in thinking but I just can't get around it.

I have a couple of text fields which I want to add an EventListener to. I put them all in one class and added the EventListener to this class. Everyhing works perfect when event of choice is "click". But when I change it to "focus" nothing happens. Why is that?

this works:

document.getElementById('parent').addEventListener('click', emptyField, false);

this doesn not:

document.getElementById('parent').addEventListener('focus', emptyField, false);

text fields:

 function emptyField(e){ var clicked = e.target; if (clicked.value == clicked.name) { clicked.value=''; if (clicked.id=='password') { clicked.type='password'; } } } 

 <class id="parent"> <input type="text" name="USERNAME" id="username" value="USERNAME"><br> <input type="text" name="PASSWORD" id="password" value="PASSWORD" ><br> </class> 

Answer 1

The click event bubbles up to ancestor elements.

The focus event does not, and it is the <input> that is being focussed, not the outer element.

Answer 2

I think you have to use querySelectorAll() that will return all the input s :

var fields = document.querySelectorAll('#parent input');

And use loop to attach focus event to every field :

for (var i = 0; i < fields.length; i++) {
    fields[i].addEventListener('focus', emptyField, false);
}

Hope this helps.

Answer 3

If you want to attach an event to several elements without an explicit loop, you can use a helper function:

    function attachEvents(elementList, eventName, handlerFunction) {
            if(typeof elementList == "string")
                    elementList = document.querySelectorAll(elementList);
            for(var i = 0; i < elementList.length; i++)
                    elementList[i].addEventListener(eventName, handlerFunction);
    }

You call it like this:

    attachEvents("#area button", "click", function(event) {
            this.style.backgroundColor = "red";
    });

Or like this:

    attachEvents(document.getElementById("area").getElementsByTagName("button"), "click", function(event) {
            this.style.backgroundColor = "red";
    });

You don't always want document.querySelectorAll - doing it yourself means you also do things like some_element.querySelectorAll which is really nice when working with things that aren't yet part of the document, or have no unique selector.

But regardless, putting the loop in a helper function gives you that jquery-esque one-liner without a huge library, it is just a few lines of simple code.