使用Dojo为一系列img添加onclick事件

Question

点击按钮触发LoadImages方法加载一系列图片到网页中。我想为每张图片添加一个 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)
{
 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;

使用Dojo为一系列img添加onclick事件

use Dojo to add an onclick event for a series of img

dojo

image