javascript - 多个元素的 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>被聚焦的是，而不是外部元素。