Question

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

我有几个文本字段，我想添加一个EventListener。我将它们全部放在一个类中，并将EventListener添加到此类中。当选择的事件是“点击”时，Everyhing工作完美。但当我把它变成“焦点”时，没有任何反应。这是为什么？

这有效：

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这样的事情，这对于处理尚未成为文档一部分的事情来说非常好，或者没有独特的选择器。

但是无论如何，将循环放在辅助函数中会给你带有jquery-esque的单行代码而不需要一个庞大的库，它只是几行简单的代码。

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

3 个答案: