Question

我有一个包含5个输入字段的页面。如何将模糊事件侦听器一起添加到它们？

尝试时出现错误

public class Income extends AppCompatActivity{

View_Expenses v = new View_Expenses();

@Override
protected void onCreate(Bundle savedInstanceState) {
            v.onCreateOptionsMenu(R.menu.main_menu); //Here have problem
}

编辑1

我能够像这样将eventListener添加到单个项目中，

document.querySelectorAll('input').addEventListener('blur', e => {
  console.log('blur on input')
})

但是有没有办法在HTMLCollection上添加集体事件侦听器？

Answer 1

Element方法querySelectorAll()返回一个静态（非实时）NodeList，该NodeList表示与指定选择器组匹配的文档元素列表。

您必须像下面这样循环遍历所有元素以分别附加事件（blur）：

document.querySelectorAll('input').forEach(function(el){
   el.addEventListener('blur', e => {
      console.log('blur on input')
   });
});

Answer 2

这将起作用。将事件监听器添加到文档中，并在事件冒泡时捕获目标。

document.addEventListener("focusout",function(event){
    if(event.target instanceof HTMLInputElement) //can also be used as elem.target.tagName.toLowerCase()=="input"
    {
        console.log("Using focusout : "+event.target.id);
        event.preventDefault();
    }
});
document.addEventListener("blur",function(event){
    if(event.target instanceof HTMLInputElement) //can also be used as elem.target.tagName.toLowerCase()=="input"
    {
        console.log("Using blur : "+event.target.id);
        event.preventDefault();
    }
},true);

<input id="1">
<input id="2">
<input id="3">
<input id="4">
<input id="5">

true是blur事件中的事件。

blur event，focusout event的MDN文档

请参阅此nice article，以获取更多信息。

如何为多个元素添加事件侦听器？

2 个答案: