Javascript 用于多个元素的AddEventListener不'；“我不能和”一起工作；焦点“；事件

我猜我在思考上有一个基本的错误，但我就是绕不开它

我有两个文本字段要添加EventListener。 我将它们都放在一个类中，并将EventListener添加到此类中。 当选择的事件是“点击”时，每件事都能完美地工作。但当我把它改成“焦点”时，什么也没发生。为什么呢

这项工作：

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

这并不意味着：

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

文本字段：

函数清空字段（e）{
var=e.target；
如果（clicked.value==clicked.name）{
单击。值=“”；
如果（单击。id=='password'）{
单击。type='password'；
}
}	
}

单击

事件将弹出到祖先元素

focus
事件没有，被聚焦的是
，而不是外部元素。
我认为您必须使用
queryselectoral（）
返回所有
输入：

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

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

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

for（变量i=0；i

希望这对您有所帮助。
如果您希望在没有显式循环的情况下将事件附加到多个元素，可以使用helper函数：

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

你并不总是想要
文档。queryselectoral
-自己动手意味着你也可以做
某些元素。queryselectoral
这在处理文档中尚未包含的内容或没有唯一选择器时非常好

但不管怎样，将循环放在助手函数中，可以得到jquery式的一行代码，而不需要庞大的库，它只是几行简单的代码。
这两行代码是一样的。。。我想你是指
查询选择器
还是什么？querselector返回一个节点列表，你不能用它来附加事件，你必须循环使用它。使用真实的例子可以帮助我们更好地理解。你说的是文本字段，但这些示例没有说明这一点。请尽可能地隔离您的特定问题，以便我们可以重新创建它。我希望函数对“焦点”事件作出反应，而不是“单击”。但它不起作用。焦点事件已附加到周围的div。请将事件设置为实际的文本字段
document.getElementById（'password'）
是的，我以前做过，而且工作得很好。。但是，如果我想添加更多的文本字段，我必须一遍又一遍地这样做。。还有更短的路吗？我不知道，谢谢。因此，没有办法添加每个文本字段？@BenQCat如果你想处理
焦点
，即使是具体地说，也不是真的-你需要在你想接收事件的每个元素上绑定到它，尽管你可以用中介绍的方式来做，以避免必须单独处理每个元素。