如何為使用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

  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);

Answer 2

將${test()}更改${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(..因為內聯事件處理程序在HTML標記中按eval執行-這是一種不好的做法，難以管理。

Answer 3

“向按鈕添加點擊動作的最佳方法是什么？”

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') }