Dojoを使用して一連のimclのonclickイベントを追加する

Question

ボタンをクリックするとLoadImagesメソッドがトリガーされ、一連の画像がWebページにロードされます。私は各画像のonclickイベントを追加したいので、ユーザーがそれをクリックすると画像名が表示されます。これを達成するためにDojoを使用する方法は？

LoadImages(PictureNames){ 
 
    var resultUl = new Builder('<ul />'); 
 
    for (i = 0; i < PictureNames.length; i++){ 
 
     resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>'); 
 
    } 
 
    dom.byId('Pictures').innerHTML = resultUl; 
 
} 
 

 
DisplayPictureName(picturename) 
 
{ 
 
\t dom.byId('PictureName').value = picturename; 
 
}

<label id="PictureName">here displays picture name</label> 
 
<div id="Pictures"></div>

Answer 1

dojo/dom-constructを使用して要素を作成し、dojo/onを使用してイベントを添付してください。

 var resultUl = domConstruct.create('ul'); 
    for (i = 0; i < PictureNames.length; i++){ 
     var image= domConstruct.create('img', { 
          id: PictureNames[i]', 
          src: "./images/"+ PictureNames[i], 
          style: {"height: 200px; width: 250px"}, 
          class: "photo"}); 
     var li= domConstruct.create('li'); 
     domConstruct.place(li, resultUl); 
     domConstruct.place(image, li); 
     dojo.on(image, 'click', this.DisplayPictureName()); 
    } 
    dom.byId('Pictures').innerHTML = resultUl;