我有一个由许多文本输入字段组成的表,用户可以为其分配值。我的目标是,如果用户“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次。或者希望有一种更简单的方法。
答案 0 :(得分:2)
您可以委派事件并将侦听器放在包含元素上:
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);
});
了解更多内容的一些有用文档:
blur
event,向下滚动查看有关事件委派的详细信息。 addEventListener
。 答案 1 :(得分:1)
<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;
});
答案 2 :(得分:0)
为所有元素添加一个公共类,并将其用于select all元素getElementByClassname。如果你想查看确切的内容,如果你的curent元素添加参数event
你的函数。和e.target给你DOM元素。
答案 3 :(得分:0)
怎么样?
<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>