如何給動態元素新增事件
阿新 • • 發佈: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;
}