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

Question

我猜我在思考中有一个基本错误，但我就是无法绕过它。

我有几个文本字段，我想向其中添加一个EventListener。我把它们都放在一个类中，并将EventListener添加到这个类中。当选择的事件是"点击"时，每件事都是完美的。但当我把它改为"专注"时，什么都不会发生。为什么？

这项工作：

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

这不是：

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

文本字段：

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

click事件冒泡到祖先元素。

focus事件没有，而是<input>被聚焦，而不是外部元素。

Answer 2

我认为您必须使用querySelectorAll()，它将返回所有input s:

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

并使用循环将focus事件附加到每个字段：

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

希望这能有所帮助。

Answer 3

如果您想在没有显式循环的情况下将事件附加到多个元素，可以使用一个辅助函数：

    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);
    }

你这样称呼它：

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

或者像这样：

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

你并不总是想要document.querySelectorAll——自己做意味着你也可以做some_element.querySelectorAll之类的事情，这在处理尚未成为文档一部分或没有唯一选择器的事情时非常好。

但是不管怎样，把循环放在一个helper函数中可以得到jquery风格的一行代码，而不需要一个巨大的库，它只是几行简单的代码。