是否有另一种方法可以通过innerHTML按钮的onclick调用本地函数而不是绑定到窗口？

Question

通过js创建一个按钮并作为模态插入到body中，按钮的onclick处理程序是promise范围内的resolve函数。

当我不将解析添加到 window: 时window.resolveAlert = resolve，onclick将抛出未找到的错误。

是否有另一种方法可以避免将解析函数绑定到window调用作用域函数？

function showRatingAlert() {
  return new Promise(resolve => {
    const content = `
      <div id="rating-alert">
        <button onclick="resolve(true)">
          Sure
        </button>
      </div>
    `
    window.resolve = resolve // TODO: bad
    const tag = document.createElement('div')
    tag.innerHTML = content
    document.getElementsByTagName('body')[0].appendChild(tag)
  })
}

Answer 1

使用 Javascript 正确附加事件监听器 - use addEventListener，然后您可以将resolve变量传递给它：

function showRatingAlert() {
  return new Promise(resolve => {
    const content = `
      <div id="rating-alert">
        <button>
          Sure
        </button>
      </div>
    `;
    const tag = document.createElement('div');
    tag.innerHTML = content;
    // tag.querySelector('button').addEventListener('click', resolve);
    // you can ensure the listener only runs once by passing { once: true }, if you wish:
    tag.querySelector('button').addEventListener('click', resolve, { once: true });
    document.body.appendChild(tag);
  })
}

showRatingAlert()
  .then(() => console.log('resolved'));

几乎应该始终避免内联处理程序 - 它们需要全局污染才能工作，并且没有附加侦听器的闭包范围的好处（如您所见）。