javascript - 如果我更改 outerHTML，事件监听器将不起作用

Question

我在 html 中有 3 张图片。
我用 querySelectorAll 选择图像，把它们变成一个数组，然后:

第一步
我将它们封装在 <div> 中标签，添加 .img-container类，使用 outerHTML .

第二步
我向图像添加了一个事件监听器。单击图像时，我控制台记录“img has been clicked”。

如果我单独运行第 1 步，代码就可以工作。
如果我单独运行 Step2，代码就可以工作。

当我尝试同时运行步骤 1 和步骤 2 时，事件监听器(步骤 2)不起作用。

有什么帮助吗？

// Select all img tags
const allImg = document.querySelectorAll('img');


// ***STEP 1 ***
//Enclose imgs in divs (and add img-container class)
const allImgArr = Array.from(allImg).map((curr) =>
  curr.outerHTML = '<div class="img-container">' + curr.outerHTML + '</div>' );

// ***STEP 2***
//Click on image to console.log 'img has been clicked'
const allImgArrTwo = Array.from(allImg).map((curr) =>
  curr.addEventListener('click', function() {
      console.log ('img has been clicked')
    }));

.img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    width: 250px;
    height: 250px;
}

<p>Img 1</p>
<img src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg" width="100" height="100" alt="">


<p>Img 2</p>
<img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg" width="100" height="100"  alt="">

<p>Img 3</p>
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt="">

Answer 1

改变 outerHTML不是处理 HTML 元素的最佳方式。创建一个新的 <div> , 设置 .className至 "img-container"并将图像添加到 <div> 中.

完整演示:

// Select all img tags
const allImg = document.querySelectorAll('img');


// ***STEP 1 ***
//Enclose imgs in divs (and add img-container class)
const allImgArr = Array.from(allImg).map((curr) => {
  const parent = document.createElement("div");
  parent.className = "img-container";
  curr.replaceWith(parent);
  parent.appendChild(curr);
  return parent;
});

// ***STEP 2***
//Click on image to console.log 'img has been clicked'
const allImgArrTwo = Array.from(allImg /* change 'allImg' to 'allImgArr' if you want to log when the <div> AND the <img> are clicked */).map((curr) =>
  curr.addEventListener('click', function() {
    console.log('img has been clicked');
  }));

.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  width: 250px;
  height: 250px;
}

<p>Img 1</p>
<img src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg?cs=srgb&dl=pexels-lukas-574071.jpg" width="100" height="100" alt="">


<p>Img 2</p>
<img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?cs=srgb&dl=pexels-christina-morillo-1181676.jpg" width="100" height="100" alt="">

<p>Img 3</p>
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt="">

编辑于 2022 年 8 月 22 日星期一 11:16:16 GMT+0200(中欧夏令时):已替换 replaceChild与 replaceWith (基于评论)