在JavaScript编程中，动态添加事件是一项重要的技能，它允许开发者在网页加载后或者用户操作时为元素添加事件处理函数，而不是在HTML中静态地预定义它们。本示例将详细介绍如何使用JavaScript动态地给标签控件添加事件，尤其是焦点事件（focus）。
我们来看一个简单的HTML结构，包含一个文本输入框(input[type="text"])和一个按钮(input[type="button"])：
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type="text" onfocus="alert('预设事件');" id="fy" />
<input type="button" onclick="set();" value="sssss"/>
</body>
</html>
```
在这个例子中，文本输入框有一个预设的`onfocus`事件，当获得焦点时会弹出警告框。按钮的作用是触发一个名为`set`的JavaScript函数，这个函数将用于动态添加新的焦点事件。
下面是JavaScript部分：
```javascript
<script language="javascript">
function set() {
var obj = document.getElementById("fy");
// 对于不同的浏览器，我们需要使用不同的事件添加方式
if (window.addEventListener) {
// 非IE浏览器（如Firefox, Chrome, Safari等）
// 使用addEventListener方法添加事件，第三个参数为布尔值，表示是否在捕获阶段调用事件处理函数
obj.addEventListener('focus', add, false);
} else {
// IE 浏览器
// 使用attachEvent方法添加事件，'on'前缀需要保留
obj.attachEvent('onfocus', add);
}
}
function add() {
alert("已经成功添加事件");
}
</script>
```
`set`函数首先获取id为"fy"的文本输入框元素，然后根据浏览器的不同，选择合适的事件绑定方法。对于非IE浏览器，使用`addEventListener`方法，它接受三个参数：事件名、事件处理函数和一个可选的布尔值，决定事件是在捕获阶段还是冒泡阶段执行。对于IE浏览器，使用`attachEvent`方法，它只接受两个参数：事件名（需包含'on'前缀）和事件处理函数。
`add`函数则是我们添加的事件处理函数，在文本框获得焦点时会被调用，显示“已经成功添加事件”的警告框。
需要注意的是，`addEventListener`和`attachEvent`的另一个区别是，`addEventListener`可以为同一个元素和事件添加多个处理函数，而`attachEvent`则会覆盖原有的事件处理函数。在示例中，由于我们没有添加其他焦点事件，因此不会影响到预设的事件。
动态添加事件在实际开发中非常有用，例如响应用户交互、异步加载元素或处理动态创建的DOM元素时。了解并熟练掌握这些方法对于JavaScript开发者来说至关重要，这有助于创建更灵活和可维护的代码。同时，对于跨浏览器兼容性问题，也需要开发者具备一定的了解，以便在不同环境下正确处理事件。
