为动态生成的html元素增加事件处理

本篇介绍为html元素添加事件，以click为例，作者只给出了代码，不过是一目了然的。

Adding OnClick property to dynamicly genertated html element


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"); 
}