Question

我有一个由许多文本输入字段组成的表，用户可以为其分配值。我的目标是，如果用户“onBlur” 任何字段，则会激活一个函数。我可以通过单独标记每个单元格来解决问题，但是它会非常重复，并且我确信有更有效的解决方法。

演示：

<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

您可以委派事件并将侦听器放在包含元素上：

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>

这是一个小提琴：http://jsfiddle.net/oj2wj1d6/7/

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

使用jQuery，你可以做一些简单的事情：

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

了解更多内容的一些有用文档：

The blur event，向下滚动查看有关事件委派的详细信息。
addEventListener。
more about doing event delegation in vanilla JS

Answer 2

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

然后在javascript中

//inputs as NodeList
var inputs = document.querySelectorAll(".blurMe");
//Convertion to Array
var inputsArr = Array.prototype.slice.call(input);
// Loop to asign event
   inputsArr.forEach(function(item){
      item.onBlur = alias;
   });

Answer 3

为所有元素添加一个公共类，并将其用于select all元素getElementByClassname。如果你想查看确切的内容，如果你的curent元素添加参数event你的函数。和e.target给你DOM元素。

Answer 4

怎么样？

<script>
    document.getElementById()
    var arr = document.getElementsByClassName('whatever');
    for(var i=0;i<arr.length;i++)
    {
        arr[i].onblur=alias;
    }
function alias()  {
    alert('started');   
}
</script>

<table>
  <tr>
    <td>I</td>
    <td><input type="text" class="whatever"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" class="whatever"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" class="whatever"></td>
  </tr>
</table>

用于多个字段的JavaScript onBlur

4 个答案: