解决JavaScript动态生成元素animationend事件不触发问题

displayImages() {
    // 如果图片容器已存在，先删除
    this.deleteExistingImageContainer();

    const imageContainer = document.createElement("div");
    imageContainer.id = 'imageContainer';
    imageContainer.className = "mb-3";

    // 载入所有图片
    for (var i = 0; i < this.displayImageUrl.length; i++) {
        const imageTag = document.createElement("img");
        imageTag.src = this.displayImageUrl[i];
        imageTag.className = 'eventImage';
        imageTag.setAttribute('width', 360);
        imageTag.setAttribute('height', 270);
        imageContainer.appendChild(imageTag);
    }
    this.cateringRequestCard.appendChild(imageContainer);

    // 为每个图片元素添加 animationend 事件监听器
    var imageArray = imageContainer.getElementsByTagName("img");
    for (var i = 0; i < imageArray.length; i++) {
        console.log(imageArray[i]);
        imageArray[i].addEventListener('animationend', function (e) {
            console.log('animation ended');
        }, false);
    }
}

.eventImage {
  position: absolute;
}

#imageContainer:nth-of-type(1) {
  border: 3px solid green;
  animation-name: fader;
  animation-delay: 0.5s;
  animation-duration: 5s;
  z-index: 20;
}

#imageContainer:nth-of-type(2) {
  z-index: 10;
}

#imageContainer:nth-of-type(n+3) {
  display: none;
}

@keyframes fader {
  from {
    opacity: 1.0;
  }

  to {
    opacity: 0.0;
  }
}

.eventImage {
  position: absolute;
}

/* 修正后的选择器：针对 #imageContainer 内的第一个 img 元素应用动画 */
#imageContainer img:nth-of-type(1) {
  border: 3px solid green; /* 边框仍然可以应用于 img 元素 */
  animation-name: fader;
  animation-delay: 0.5s;
  animation-duration: 5s;
  z-index: 20;
}

#imageContainer img:nth-of-type(2) {
  z-index: 10;
}

#imageContainer img:nth-of-type(n+3) {
  display: none;
}

@keyframes fader {
  from {
    opacity: 1.0;
  }

  to {
    opacity: 0.0;
  }
}