Получение идентификатора элемента события click с содержимым Dynami c

Question

Обучение JS, и мой проект в настоящее время заключается в создании почтового ящика (после курса по веб-приложению CS50). Это одностраничное приложение, которое выглядит следующим образом:

Электронные письма генерируются динамически по мере того, как я их составляю и отправляю на mike@mike.com.

И это код, который я написал для получения содержимого Dynami c во вложенных элементах div.

// Get emails for inbox
  if (mailbox === 'inbox') {
    fetch('/emails/inbox')
      .then(response => response.json())
      .then(emails => {
        console.log(emails);

        let inbox_container = document.createElement('div');

        inbox_container.setAttribute("id", "inbox-container");

        document.querySelector('#emails-view').append(inbox_container);

        for (let i = 0; i < emails.length; i++) {

          let email_id = i;

          let email_header = document.createElement('div');
          email_header.setAttribute("class", "email-header")
          email_header.setAttribute("id", email_id);
          email_header.addEventListener('click', function(event) {
            console.log(event);
          });

          let sender = document.createElement('div');
          sender.setAttribute("class", "email-header-sender");
          sender.appendChild(document.createTextNode(emails[i].sender));

          let subject = document.createElement('div');
          subject.setAttribute("class", "email-header-subject");
          subject.appendChild(document.createTextNode(emails[i].subject));

          let timestamp = document.createElement('div');
          timestamp.setAttribute("class", "email-header-timestamp");
          timestamp.appendChild(document.createTextNode(emails[i].timestamp));

          email_header.appendChild(sender);
          email_header.appendChild(subject);
          email_header.appendChild(timestamp);

          document.querySelector("#inbox-container").append(email_header);
        }
      });
  }

Что я пытаюсь сделать, так это добавить прослушиватель кликов к каждому div-заголовку электронного письма при его создании, поэтому я назначил им уникальный идентификатор, представляющий собой просто число, начинающееся с 0.

Однако я застрял при попытке получить этот идентификатор в моем событии клика. В консольном журнале событий я не могу найти этот идентификатор, и в нем так много лишней информации. Это заставляет меня думать, что должен быть лучший способ реализовать это.

Есть идеи?

Answer 1

Вы можете получить id свойство каждого нового элемента, например:

 email_header.addEventListener('click', function(event) {
     console.log( event.target.id );
 });

Или, как,

 email_header.addEventListener('click', function(event) {
     console.log( this.id );
 });