Question

我试图找出我是否可以在HTML5 + Javascript中执行此类操作。我也更喜欢在纯JavaScript中执行此操作而不使用像jQuery这样的库。以下是我正在尝试做的一个例子：

（我来自Lua所以请原谅我的代码，我不知道如何在Javascript中编码，但它应该是可读的，所以你可以理解我正在尝试做什么。提前谢谢，抱歉这个麻烦）

table = { "Image1", "Image2", "Image3" }
images = {}

for i = 0, 100 do
  images[i] = newImage( "images/" + table[i] + ".png" )
  images[i].x = 30 * i
  images[i].num = i
  images[i].addEventListener( onTouchDown, doSomething )
end

这将加载101个图像，从表中获取图像的名称，并为每个图像提供事件监听器。这可能吗？提前感谢有关该主题的任何信息！

Answer 1

使用Event Delegation：

document.getElementById('newDiv').addEventListener('onTouchDown', function (event) {
    if (event.target && event.target.nodeName === 'IMG') {
        console.log(event.target);
    }
});

Fiddle

Answer 2

这会使用table中的字符串创建3张图片，并将其附加到document.body ...

var table = ["Image1", "Image2", "Image3"];
var images = [];

for (var i = 0; i < table.length; i++) {
    images[i] = new Image(); // creates an image
    images[i].src = "images/" + table[i] + ".png"; // gets image location from table
    images[i].style.marginLeft = (i*30)+"px"; // pushes images i*30 pixels to the left

    if (images[i].addEventListener)
        images[i].addEventListener("onTouchDown", function () { /* Do something */ });

    else if (images[i].attachEvent) // addEventListener isn't always supported
        images[i].attachEvent("onTouchDown", function () { /* Do something */ });

    document.body.appendChild(images[i]); // append newly created image to body
}

Here's a JSFiddle ...

编辑：如果您想使用position:absolute代替margin，请将marginLeft行替换为should：

    images[i].style.position = "absolute"; // Sets absolute positioning
    images[i].style.left = (i*30)+"px"; // pushes images i*30 pixels left

有关可通过Javascript更改的CSS属性列表，请参阅this page。但通常你需要知道的是：

大多数CSS属性在Style对象中表示为属性。对于非连字符属性，属性是相同的，而对于带连字符的属性，删除连字符并将首字母大写跟着它。例如，操纵“背景颜色” 通过DOM的CSS属性，语法看起来像： document.getElementById（“george”）。style.backgroundColor =“white”;

（摘自javascriptkit.com）

在循环中加载多个图像并向每个图像添加侦听器

2 个答案: