用于多个字段的 JavaScript onBlur

Question

我有一个表格，其中包含许多用户可以为其赋值的文本输入字段。我的目标是，如果用户“onBlur”的any 字段，则将激活一个功能。我可以通过单独标记每个单元格来解决这个问题，但它会非常重复，我相信有更有效的方法来解决这个问题。

演示:

<table>
  <tr>
    <td>I</td>
    <td><input type="text" id="whatever1"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" id="whatever2"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" id="whatever3"></td>
  </tr>
</table>

使用 JS:

var e1 = document.getElementById('whatever1');
e1.onblur = alias;

function alias()  {
    alert('started');   
}

然后对每个输入框重复此操作 2 次。或者希望有更简单的方法。

Answer 1

您可以委托(delegate)事件并将监听器放在包含元素上:

var e1 = document.getElementById('containing-table');
e1.addEventListener('blur', function(e){
    alert(e.target);
}, true);

和修改后的 html:

<table id="containing-table">
  <tr>
    <td>I</td>
    <td><input type="text" id="whatever1"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" id="whatever2"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" id="whatever3"></td>
  </tr>
</table>

这是一个 fiddle :http://jsfiddle.net/oj2wj1d6/7/

这样做的好处是您实际上可以删除和添加输入元素，并且监听器将捕获新节点上的事件。您可以在 addEventListener 的函数内添加条件语句，以进一步过滤您希望如何响应不同类型的事件目标。

使用 jQuery，您可以做一些简单的事情:

$("table").on("blur", "input", function(e){
    alert(e.target);
});

一些有用的文档以了解更多信息:

• > The blur event ，向下滚动以了解有关事件委托(delegate)的详细信息。
• > addEventListener .
• > more about doing event delegation in vanilla JS