在Web开发中，JavaScript允许以动态的方式为元素添加事件监听器。这种技术特别有用，当需要在页面加载时为多个元素添加相同的事件处理程序时。本文将展示如何为文本框添加焦点获取和失去焦点时的事件处理程序。
首先，需要理解事件绑定的基本概念。事件绑定是指将一个事件（如点击、鼠标移动、键盘输入等）与一个函数关联起来，当事件被触发时，相应的函数将被执行。在JavaScript中，可以使用多种方法来绑定事件，包括直接在HTML标签中使用事件属性（如 onclick），或者在JavaScript代码中使用元素的事件属性（如 element.onclick）。
然而，如果想要在页面加载时为所有文本框添加事件监听器，那么就需要使用一种动态的方式来绑定这些事件。以下是一个示例，展示了如何为页面上的所有文本框动态添加焦点获取和失去焦点的事件处理程序。
下面的JavaScript代码段展示了如何在页面加载时为所有文本框添加事件监听器：
function fnTXTFocus(varname) {
var objTXT = document.getElementById(varname);
objTXT.style.borderColor = "Red";
}
function fnTXTLostFocus(varname) {
var objTXT = document.getElementById(varname);
objTXT.style.borderColor = "White";
}
function fnOnLoad() {
var t = document.getElementsByTagName('INPUT');
var i;
for (i = 0; i < t.length; i++) {
if (t[i].type == "text") {
t[i].attachEvent('onfocus', new Function("fnTXTFocus('" + t[i].id + "')"));
t[i].attachEvent('onblur', new Function("fnTXTLostFocus('" + t[i].id + "')"));
}
}
}
这段代码首先定义了两个函数，fnTXTFocus 和 fnTXTLostFocus，分别用于处理文本框获取焦点和失去焦点的事件。当文本框获取焦点时，边框颜色变为红色；当文本框失去焦点时，边框颜色变回白色。
接着，定义了 fnOnLoad 函数，该函数在页面加载时执行。它首先获取页面上所有的输入元素，然后遍历这些元素。对于每个文本框（type为"text"的元素），它使用 attachEvent 方法为文本框添加焦点获取和失去焦点的事件处理程序。
以下是HTML结构，展示了如何使用上述JavaScript代码：
<body onload="fnOnLoad()">
<form id="form1">
<div>
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" id="txtUN">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="text" id="txtPwd">
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="text" id="txtCpwd">
</td>
</tr>
</table>
</div>
</form>
</body>
在这个HTML结构中，定义了一个表单，其中包含三个文本输入框。每个文本框都有一个唯一的ID，这些ID将被JavaScript代码用来引用对应的文本框。