怎么為動(dòng)態(tài)生成的html元素增加事件處理

本篇內(nèi)容主要講解“怎么為動(dòng)態(tài)生成的html元素增加事件處理”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么為動(dòng)態(tài)生成的html元素增加事件處理”吧!

function klik()...{ 
alert("ppp"); 
} 

function addNewImg(newImageId)...{ 
newImg = document.createelement('img'); 
newImg.id = "image"+newImageId; 
newImg = document.getElementById("divimage1").appendChild(newImg); 
newImg.onclick=klik 
} 

it works. The new image is created and after clicking on it "ppp" is alerted. 

but when I use this: 

function klik(ff)...{ 
alert(ff); 
} 

function addNewImg(newImageId)...{ 
newImg = document.createelement('img'); 
newImg.id = "image"+newImageId; 
newImg = document.getElementById("divimage1").appendChild(newImg); 
newImg.onclick=klik("ppp"); 
} 

"ppp" is alerted in the moment of executing the statement newImg.onclick=klik("ppp"); and when clicking on the generated image nothing happens, even Javascript Console of Firefox stays blind. 

function addNewImg(newImageId)...{ 
newImg = document.createelement('img'); 
newImg.id = "image"+newImageId; 
newImg = document.getElementById("divimage1").appendChild(newImg); 
var onC='ppEdit("image'+newImageId+'","image")'; 
document.getElementById("image"+newImageId).onclick=new Function(onC); 
} 

it works 


maybe an object detection be great to add too 
why? 
So browsers that understand document.getElementById, 
document.createelement execute the code.

function addNewImg(newImageId)...{ 
//object detection check 
if (!document.getElementById &&!document.createelement)...{return;} 
newImg = document.createelement('img'); 
newImg.id = "image"+newImageId; 
newImg = document.getElementById("divimage1").appendChild(newImg); 
var onC='ppEdit("image'+newImageId+'","image")'; 
document.getElementById("image"+newImageId).onclick=new Function(onC); 
} 


alternative solution: 
if (!document.getElementById) ...{return;} 
document.getElementById("image"+newImageId).onclick=function()...{ 
ppEdit(this.id, "image"); 
} 

到此，相信大家對(duì)“怎么為動(dòng)態(tài)生成的html元素增加事件處理”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！