如何給動態元素新增事件
阿新 • • 發佈：2019-02-09
要給動態新增的元素新增事件，可以給其父元素新增事件。這樣若是在冒泡事件下，點選事件由子元素傳遞到父元素，就會觸發父元素上繫結的事件函式，在函式裡做一下過濾，便可實現想要的功能。（在捕獲事件裡也是同樣的道理）
以下分三種事件舉例。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;
}