javascript-多个元素的AddEventListener不适用于“焦点”事件

我想我在思考时有一个基本错误,但我无法解决.

我有几个文本字段,我想向其中添加一个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>

解决方法:

我认为您必须使用querySelectorAll(),它将返回所有输入:

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

并使用循环将焦点事件附加到每个字段:

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

希望这可以帮助.

上一篇:javascript-用于提交事件的addEventListener尽早运行处理程序功能


下一篇:javascript-addEventListener到元素,元素本身作为参数