Как добавить функцию / прослушиватель событий в элемент, созданный с помощью литералов шаблона ES6?

Question

Я пробовал это:

const el = `<button class="create-panorama" onclick="${test()}">Create panorama</button>`

function test () {
  console.log('esesesee')
}

element.insertAdjacentHTML('beforeend', el)
// element = <div id="element"></div>

Однако, когда я нажимаю кнопку, ничего не происходит.

Какой лучший способ добавить действие щелчка к button?

Answer 1

Изменить ${test()} на test()

const el = `<button class="create-panorama" onclick="test()">Create panorama</button>`
document.getElementById("i");
i.innerHTML = el
function test () {
  console.log('esesesee')
}

<div id="i"></div>

Примечание: Лучший способ добавить прослушиватель - .addEventListener(.., поскольку встроенные обработчики событий выполняются как eval в разметках HTML - это плохая практика, которой трудно управлять.

Answer 2

«Какой лучший способ добавить действие кнопки к кнопке?»

addEventListener

const el = '<button class="create-panorama">Create panorama</button>';

document.body.insertAdjacentHTML('beforeend', el);

const cp = document.querySelector('.create-panorama');
cp.addEventListener('click', test, false);

function test() {
  console.log('esesesee')
}

Answer 3

  onclick="${test()}"

Это в основном пытается выполнить:

 ${test()}

, что, очевидно, не сработает, поскольку вы не можете использовать литералы шаблона вне строки. Поэтому просто сделайте

onclick="test()"

Какой лучший способ добавить действие кнопки к кнопке?

Встроенные слушатели событий плохие по нескольким причинам, всегда используйте .addEventListener!

  const el = document.createElement("button");
  el.textContent = "Click me!";
  el.className = "sth";
  el.addEventListener("click", test);

  element.appendChild(el);