如何为ES6模板字面量创建的元素添加事件监听器？点击无响应求解

嘿，我来帮你拆解下问题：你当前的代码里，onclick="${test()}"这行有个关键错误——当你拼接HTML字符串的时候，test()会立刻执行，而不是等到按钮被点击时才触发。所以最终按钮的onclick属性值其实是undefined（因为test函数没有返回值），这就导致点击按钮时完全没反应啦。

下面是几种给动态插入按钮添加点击事件的最佳方式，按推荐程度排序：

1. 使用事件委托（最推荐） #

事件委托利用DOM的事件冒泡机制，给父元素（也就是你的element）绑定一个点击事件，然后判断触发事件的元素是不是目标按钮。这种方式的优势在于：不管按钮是现在插入还是以后动态插入，都能正常触发事件，而且相比给每个元素绑定事件，性能更优。

// 先插入按钮，不用写onclick属性
const el = `<button class="create-panorama">Create panorama</button>`;
element.insertAdjacentHTML('beforeend', el);

// 给父元素绑定点击事件
element.addEventListener('click', function(e) {
  // 判断点击的元素是不是我们的目标按钮
  if (e.target.classList.contains('create-panorama')) {
    test();
  }
});

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

2. 直接创建DOM元素并绑定事件 #

如果只是插入单个按钮，直接用原生DOM API创建元素，然后通过addEventListener绑定事件会更直观，也能避免字符串拼接带来的各种问题（比如XSS风险、函数执行时机错误）。

// 创建按钮元素
const button = document.createElement('button');
button.className = 'create-panorama';
button.textContent = 'Create panorama';

// 绑定点击事件（注意这里传的是函数引用，不要加括号！）
button.addEventListener('click', test);

// 插入到父元素中
element.appendChild(button);

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

3. （不推荐）修正字符串拼接的方式 #

如果你一定要用insertAdjacentHTML插入HTML字符串，那需要把函数调用作为字符串传递，而不是执行函数。也就是把${test()}改成直接写test()。不过这种方式有个前提：test函数必须在全局作用域中，不然浏览器找不到这个函数，而且这种方式存在XSS安全风险，不推荐在生产环境使用。

// 确保test函数在全局作用域
function test() {
  console.log('esesesee');
}

// 直接写test()，而不是${test()}
const el = `<button class="create-panorama" onclick="test()">Create panorama</button>`;
element.insertAdjacentHTML('beforeend', el);

总结一下：优先选择事件委托或者直接创建DOM元素绑定事件的方式，这两种方案更安全、更灵活，也更符合现代前端的开发规范。

内容的提问来源于stack exchange，提问作者alex