Почему прослушивание вешается не на все элементы?

Question

[AlexandrMa]

1. С помощью JS создаётся кнопка.
2. По нажатию на неё создается div, в котором два элемента: список и кнопка "закрыть".

Событие на кнопку "закрыть" срабатывает. А вот событие (click) на элементы списка li нет. Почему?

let test = {

  wrapper: null,

  run(){

    let b = document.createElement("button");
    b.textContent = 'Open';
    b.addEventListener('click', () => {
      this.open();
    });
    document.body.appendChild(b);
  },

  open(){

    this.wrapper = document.createElement("div");
    this.wrapper.id = 'wrapper';
    this.wrapper.innerHTML = '<p>Hello World!</p>';

    let btn_close = document.createElement("button");
    btn_close.textContent = 'Close';
    btn_close.addEventListener('click', () => {
      this.close(); //тут всё нормально
    });

    this.wrapper.appendChild(btn_close);

    
    //список создается в отдельном методе
    this.wrapper.appendChild(this.myList()); //по идее должен добавиться и весь ul и его EventListener.
    
    document.body.appendChild(this.wrapper);
  },

  close(){
    this.wrapper.remove();
  },

  myList(){

    let ul = document.createElement('ul');

    [1,2,3,4,5].forEach(function(val) {
      let li = document.createElement('li');
      li.textContent = val;
      li.addEventListener('click', () => {
        this.clickList(); ///uncaught TypeError: this.clickList is not a function
      });
      ul.appendChild(li);
    });

    return ul;
  },

  clickList(){
    alert('click');
  }

}

let t = test;
t.run();

Answer 1

[Сергей Соколов]

this там — это элемент li

Comments

[AlexandrMa]

а как обратиться к методу самого объекта?

[Сергей Соколов]

AlexandrMa, как вариант:

// ...
    const context = this; // сохранить в переменную

    [1,2,3,4,5].forEach(function(val) {
      let li = document.createElement('li');
      li.textContent = val;
      li.addEventListener('click', () => {
        context.clickList(); //  и тут использовать
      });
      ul.appendChild(li);
    });

[Сергей Соколов]

AlexandrMa, или лучше слушать единственный раз на общем родителе: на элементе ul

[Сергей Соколов]

myList(){

  const ul = document.createElement('ul');

  ul.addEventListener('click', event => {
    if ('LI' === event.target.tagName) {
      this.clickList();
    }
  });


  [1,2,3,4,5].forEach(function(val) {
    let li = document.createElement('li');
    li.textContent = val;
    ul.appendChild(li);
  });

  return ul;
},

[AlexandrMa]

Спасибо, понял. Работает)

[Владимир]

Может быть я сильно туплю, но почему не сделать:
li.addEventListener('click', context.clickList);

Зачем вводить дополнительную стрелочную функцию если все, что она делает, это вызывает настоящий обработчик?

[Сергей Соколов]

Владимир, это я с минимальными изменениями отн. исходного кода показал.

[Владимир]

Сергей Соколов, тогда понятно.