要給動(dòng)態(tài)添加的元素添加事件，可以給其父元素添加事件。這樣若是在冒泡事件下，點(diǎn)擊事件由子元素傳遞到父元素，就會(huì)觸發(fā)父元素上綁定的事件函數(shù)，在函數(shù)里做一下過濾，便可實(shí)現(xiàn)想要的功能。（在捕獲事件里也是同樣的道理）
以下分三種事件舉例。javaScript事件有HEML事件、DOM0級事件和DOM2級事件。
1. HEML事件：
如示例所示，當(dāng)點(diǎn)擊“添加”按鈕添加元素后，點(diǎn)擊新添加的元素也會(huì)在控制臺(tái)看到日志。
將PRintLog的調(diào)用直接寫在html的元素上，這種添加事件的方法就是HTML事件。這種方法的缺點(diǎn)是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(){ //當(dāng)點(diǎn)擊添加按鈕時(shí)，添加一個(gè)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); } } //點(diǎn)擊child span時(shí)，打印一行日志 function printLog(event){ console.log("當(dāng)前節(jié)點(diǎn)類名："+event.currentTarget.className+",產(chǎn)生事件的節(jié)點(diǎn)類名："+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級事件：當(dāng)點(diǎn)擊添加按鈕時(shí)，添加一個(gè)child span addObj.onclick = function(){ var childObj = document.createElement("span"); childObj.setAttribute('class','child'); parentObj.appendChild(childObj); } //DOM0級事件：點(diǎn)擊child span時(shí)，打印一行日志 parentObj.onclick = function(event){ console.log("當(dāng)前節(jié)點(diǎn)類名："+event.currentTarget.className+",產(chǎn)生事件的節(jié)點(diǎn)類名："+event.target.className); } //取消事件 // parentObj.onclick = null; } </script></body></html>3. DOM2級事件：
addEventListener(event, function, useCapture)
removeEventListener(event, function, useCapture)
IE事件處理程序調(diào)用的是如下函數(shù)，沒有最后一個(gè)參數(shù)的原因是早期的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級事件：當(dāng)點(diǎn)擊添加按鈕時(shí)，添加一個(gè)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); } //點(diǎn)擊child span時(shí)，打印一行日志 function printLog(event){ console.log("當(dāng)前節(jié)點(diǎn)類名："+event.currentTarget.className+",產(chǎn)生事件的節(jié)點(diǎn)類名："+event.target.className); } </script></body></html>以上代碼的效果圖如下，后面兩個(gè)元素是點(diǎn)擊添加按鈕后添加的。
附：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; }
新聞熱點(diǎn)
疑難解答
圖片精選
