要给动态添加的元素添加事件，可以给其父元素添加事件。这样若是在冒泡事件下，点击事件由子元素传递到父元素，就会触发父元素上绑定的事件函数，在函数里做一下过滤，便可实现想要的功能。（在捕获事件里也是同样的道理）
以下分三种事件举例。javaScript事件有HEML事件、DOM0级事件和DOM2级事件。
1. HEML事件：
如示例所示，当点击“添加”按钮添加元素后，点击新添加的元素也会在控制台看到日志。
将PRintLog的调用直接写在html的元素上，这种添加事件的方法就是HTML事件。这种方法的缺点是html和Javascript代码耦合性较大。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript event demo</title> <!--HTML事件--> <link rel="stylesheet" type="text/CSS" href="demo.css"></head><body onload="init()"> <div id="parent" class="parent" onclick="printLog(event)"> <span class="child"></span> <span class="child"></span> </div> <button id="add">添加</button> <script type="text/javascript"> function init(){ //当点击添加按钮时，添加一个child span var addObj = document.getElementById("add"); addObj.onclick = function(){ var parentObj = document.getElementById("parent"); var childObj = document.createElement("span"); childObj.setAttribute('class','child'); parentObj.appendChild(childObj); } } //点击child span时，打印一行日志 function printLog(event){ console.log("当前节点类名："+event.currentTarget.className+",产生事件的节点类名："+event.target.className); } </script></body></html>2. DOM0级事件：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript event demo</title> <link rel="stylesheet" type="text/css" href="demo.css"></head><body onload="init()"> <div id="parent" class="parent"> <span class="child"></span> <span class="child"></span> </div> <button id="add">添加</button> <script type="text/javascript"> function init(){ var addObj = document.getElementById("add"); var parentObj = document.getElementById("parent"); //DOM0级事件：当点击添加按钮时，添加一个child span addObj.onclick = function(){ var childObj = document.createElement("span"); childObj.setAttribute('class','child'); parentObj.appendChild(childObj); } //DOM0级事件：点击child span时，打印一行日志 parentObj.onclick = function(event){ console.log("当前节点类名："+event.currentTarget.className+",产生事件的节点类名："+event.target.className); } //取消事件 // parentObj.onclick = null; } </script></body></html>3. DOM2级事件：
addEventListener(event, function, useCapture)
removeEventListener(event, function, useCapture)
IE事件处理程序调用的是如下函数，没有最后一个参数的原因是早期的IE浏览器只支持冒泡事件。
attachEvent(event, function)
detachEvent(event, function)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript event demo</title> <link rel="stylesheet" type="text/css" href="demo.css"></head><body onload="init()"> <div id="parent" class="parent"> <span class="child"></span> <span class="child"></span> </div> <button id="add">添加</button> <script type="text/javascript"> function init(){ var addObj = document.getElementById("add"); var parentObj = document.getElementById("parent"); //DOM0级事件：当点击添加按钮时，添加一个child span addObj.onclick = function(){ var childObj = document.createElement("span"); childObj.setAttribute('class','child'); parentObj.appendChild(childObj); } //DOM2级事件：false表示冒泡事件；true表示捕获事件 parentObj.addEventListener('click',printLog,false); //删除事件 // parentObj.removeEventListener('click',printLog,false); } //点击child span时，打印一行日志 function printLog(event){ console.log("当前节点类名："+event.currentTarget.className+",产生事件的节点类名："+event.target.className); } </script></body></html>以上代码的效果图如下，后面两个元素是点击添加按钮后添加的。
附：html代码里所用的css文件如下：
#parent{ border:1px solid #876; width:300px; height:100px; } .child{ border:1px solid #954; background-color:#954; width:30px; height:30px; display:inline-block; margin: 5px 2px; } .child:hover{ border:1px solid #333; } #add{ margin-top:10px; }
新闻热点
疑难解答
