要給動態添加的元素添加事件，可以給其父元素添加事件。這樣若是在冒泡事件下，點擊事件由子元素傳遞到父元素，就會觸發父元素上綁定的事件函數，在函數里做一下過濾，便可實現想要的功能。（在捕獲事件里也是同樣的道理）
以下分三種事件舉例。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; }
新聞熱點
疑難解答
