在没有全局功能的情况下将onclick事件传递到模板文字中

问题描述

我一直在使用普通的javascript（仅不使用jquery javascript）在模板文字中添加onclick事件。如您所见，结果html知道每个div上的onclick事件都有功能，当我单击时会发出警报，但是当我单击时，它没有响应。似乎应该工作，但不知何故。

我从Stackoverflow获得了很多帮助，但是大多数anwser都在使用全局函数。但是我个人不想使用全局函数，因为有时会引起一些麻烦。

那么我该如何使用模板文字将函数实际传递给onclick事件？

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="UTF-8" />
        <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="ul"></div>
    </body>
    <script src="/index.js"></script>
</html>

index.js

function test() {
    const list = [
        { number: 1,check: () => alert("1") },{ number: 2,check: () => alert("2") },{ number: 3,check: () => alert("3") },];
    const $list = list.reduce((acc,item) =>
        acc + `<div onclick='${item.check}'>${item.number}</div>`,""
    );
    const $ul = document.querySelector("#ul");
    $ul.innerHTML = $list;
}
test();

结果

解决方法

创建实际的DOM元素，而不是通过HTML字符串构建DOM。

const $ul = document.querySelector("#ul");
for (const item of list) {
  const element = document.createElement('div');
  element.textContent = item.number;
  element.onclick = item.check;
  $ul.appendChild(element);
}

javascript template-literals