Как правильно инициализировать событие на динамической разметке?

Question

[s24344]

Всем привет. Подскажите, пожалуйста, как правильно инициализировать событие на динамической разметке?
Ниже приведу мой вариант решения:

<div class="element" data-component="element">
    <button class="element__button" data-element-ref="button">button</button>

    <div class="element__template" data-element-ref="template">
    </div>
</div>

const template = `
  <div class="element__content">
    template
    
    <button class="element__content-button" data-element-ref="template-button">button</button>
  </div>
`
class Element {
  constructor(el) {
    this.el = el;

    this.button = this.el.querySelector('[data-element-ref="button"]');
    this.template = this.el.querySelector('[data-element-ref="template"]');

    this.init();
  }

  init() {
    this.button.addEventListener('click', this.onClickPrimaryButton);
  }

  onClickPrimaryButton = () => {
    this.template.innerHTML += template;

    this.buttonElement = this.el.querySelectorAll('[data-element-ref="template-button"]');

    this.buttonElement.forEach((button) => {
      button.addEventListener('click', this.onClickButtonElement);
    });
  }

  onClickButtonElement = (event) => {
    console.log(event.target);
  }
}

const element = [...document.querySelectorAll('[data-component="element"]')].map(n => new Element(n));

Answer 1

[0xD34F]

делегирование, конечно же

UPD.

как можно переписать ваш код

class Element {
  constructor(el) {
    this.el = el;

    this.button = this.el.querySelector('[data-element-ref="button"]');
    this.template = this.el.querySelector('[data-element-ref="template"]');

    this.button.addEventListener('click', this.onClickPrimaryButton);
    this.template.addEventListener('click', this.onClickButtonElement);
  }

  onClickPrimaryButton = () => {
    this.template.innerHTML += template;
  }

  onClickButtonElement = (e) => {
    if (e.target.dataset.elementRef === 'template-button') {
      console.log(e.target);
    }
  }
}

Comments

[s24344]

Большое спасибо!

[s24344]

Подскажите, пожалуйста, ответ ещё на один вопрос: как сделать, чтобы dataset работал в IE < 11. Какой способ использовать (polyfill) ?

[0xD34F]

s24344, используйте getAttribute/setAttribute.