js动态添加的DIV中的onclick事件简单实例

### JavaScript动态添加元素的事件绑定方法 在Web开发中，经常需要动态地向页面添加DOM元素，并为这些元素绑定事件处理器。本文将介绍如何在JavaScript中为动态添加的`div`元素绑定`onclick`事件处理器。 #### 基础的事件绑定方法 最基础的方式是直接在HTML标签内通过`onclick`属性指定事件处理函数。例如： ```html <input type="button" onclick="alert(this.value)" value="我是button"/> ``` 这种方式简单直接，但不适用于动态添加的元素，因为它在页面加载时就已确定。 #### 动态添加元素后的事件绑定 对于动态添加的元素，我们通常使用JavaScript代码来设置其事件监听器。下面是使用原生JavaScript为动态添加的`input`元素绑定`onclick`事件的示例： ```javascript <input type="button" value="我是button" id="bu"> <script type="text/javascript"> var bObj = document.getElementById("bu"); bObj.onclick = function(obj) { alert(this.value); }; </script> ``` 在这个例子中，`bObj`代表获取到的`input`元素，通过将`onclick`属性设置为一个函数引用，我们可以为这个元素绑定`onclick`事件。 #### 使用匿名函数绑定事件 除了直接绑定一个具体的函数，也可以使用匿名函数直接在`onclick`属性中定义事件行为： ```javascript <input type="button" value="我是button" id="bu"> <script type="text/javascript"> var bObj = document.getElementById("bu"); bObj.onclick = function() { alert(this.value); }; </script> ``` 这种方法简洁，但不便于管理或复用事件处理逻辑。 #### IE和Firefox中的事件绑定差异 对于IE浏览器，使用`attachEvent`方法来绑定事件，而在其他浏览器（如Firefox）中，则使用`addEventListener`方法。这两种方法的语法不同： ```javascript // IE bObj.attachEvent("onclick", method1); // Firefox及其他浏览器 bObj.addEventListener("click", method1, false); ``` #### 事件绑定的执行顺序 在`attachEvent`中，如果多次绑定同一个事件，后绑定的事件处理器会覆盖先前的。而在`addEventListener`中，事件处理器会按照绑定的顺序依次执行。例如： ```javascript // IE bObj.attachEvent("onclick", method1); bObj.attachEvent("onclick", method2); bObj.attachEvent("onclick", method3); // Firefox bObj.addEventListener("click", method1, false); bObj.addEventListener("click", method2, false); bObj.addEventListener("click", method3, false); ``` 在IE中，如果按照上述代码绑定，只有`method3`会被执行，而其他浏览器则会先执行`method1`，然后是`method2`，最后是`method3`。 #### IE特有的事件处理 在IE浏览器中，建议在使用`attachEvent`后使用`detachEvent`来释放内存，虽然这一点未经验证确认，但这是一个好习惯： ```javascript bObj.detachEvent("onclick", method3); ``` #### 跨浏览器兼容性 在实际开发中，我们需要考虑到不同浏览器间的兼容性问题。通常，我们会编写通用的封装函数，来统一处理不同浏览器的事件绑定差异： ```javascript function addEvent(element, eventName, handler) { if (element.addEventListener) { element.addEventListener(eventName, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + eventName, handler); } else { element['on' + eventName] = handler; } } ``` 使用上述封装函数，可以简化跨浏览器的事件绑定过程。 #### 总结 在JavaScript开发中，动态绑定事件处理器是一个非常常见的需求。通过上述方法，我们可以为动态添加的元素绑定`onclick`事件，并处理IE和其他浏览器之间的兼容性问题。正确地管理事件绑定不仅能够提升用户交互体验，还可以避免不必要的资源浪费，保持代码的清晰和高效。在实施时，推荐使用封装函数来处理兼容性问题，并在IE浏览器中适当释放不再需要的事件监听器。