有关动态创建的 HTML 事件的 JavaScript 问题

Question

我在使用 JavaScript 定位动态创建的元素时遇到了一些问题。

问题 1

缩短的 JavaScript 代码:

var lightbox = document.createElement('div'),
    nav = document.createElement("nav"),
    imga = document.querySelectorAll(".gallery a");
for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        document.body.insertBefore(lightbox, document.body.firstChild);
        lightbox.appendChild(nav);
    });
}

1:现在我想在我的 <nav> 上创建一个事件.如何让事件成为目标 #lightbox nav a而不仅仅是 #lightbox nav ？

nav.addEventListener("click", function() {
    // works, but I want to target only the <a> links inside
});

我试过很多东西，像这样:

var selector = document.querySelectorAll("nav a");
for (i = 0; i < selector.length; i++) {
    selector[i].addEventListener("click", function() {
        // doesn't work because the <nav> is inserted dynamically
    });
}

还有这个:

var selector = nav.getElementsByTagName("a");
for (i = 0; i < selector.length; i++) {
    selector[i].addEventListener("click", function() {
        // doesn't work because the <nav> is inserted dynamically
    });
}

第 2 期

缩短的 JavaScript 代码:

var img,
    imga = document.querySelectorAll(".gallery a");
for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
            for (i = 0; i < imga.length; i++) {
                img = document.createElement("img");
                lightbox.appendChild(img);
            }
    });
}

2:如何向动态创建的 #lightbox img 添加事件？ img = document.createElement("img")必须在附加多个图像的函数内部，因此我不能这样做(就像目前在 <nav> 上):

img.addEventListener("click", function() {
    // doesn't work because img = document.createElement("img")
    // has to be inside another function
});

有人可以帮我解决这个问题吗？我在 JavaScript 方面不是很有经验。

Answer 1

第 2 期

简单的解决方案是将事件处理程序添加到循环内的所有元素

var img,
    imga = document.querySelectorAll(".gallery a");

for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        for (i = 0; i < imga.length; i++) {
            img = document.createElement("img");
            img.setAttribute("src", imga[i].getAttribute("href"));
            lightbox.appendChild(img);

            img.addEventListener('click', fn, false);
        }
    });
}

有点难的解决方案是使用委托(delegate)事件处理程序

var img,
    imga = document.querySelectorAll(".gallery a");

lightbox.addEventListener('click', function(e) {
    if ( e.target.nodeType.toLowerCase() === 'img' ) {
         // do stuff
    }
}, false);

for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        for (i = 0; i < imga.length; i++) {
            img = document.createElement("img");
            img.setAttribute("src", imga[i].getAttribute("href"));
            lightbox.appendChild(img);
        }
    });
}

问题 1

可以像上面那样解决，使用委托(delegate)的事件处理程序

nav.addEventListener("click", function(e) {
    if ( e.target.nodeType.toLowerCase() === 'a' ) {

         // an achor was clicked, do stuff

    }
});