Javascript 如何使用功能性的JS（非React）组件从html元素的onclick属性调用范围内函数？

我有一些我非常接近能够做到的事情，但我觉得我错过了一些非常明显的事情。我的问题是如何将函数与呈现某些html的函数中的onclick html属性相关联。我这样做是为了学习和演示，所以我知道如何在React这样的东西中非常简单地完成这项工作

function article_list(article_list_id) {

    const onclick_handler = (event) => {
      event.preventDefault();
      console.log(`I was clicked!!!`)
      return false;
    }
    
    const render = () => {
      console.log("I was rendered!!!")
      articleElement = document.getElementById(article_list_id)
      articleElement.innerHTML = `
        <ul>
        ${some_array_of_items.map(item => { 
          return `
            <li class="text-sm flex items-center">
              <span><a href="#" class="list-checklist" data-id="${item.id}" onclick="${onclick_handler}">${item.title}</a></span>
            </li>`
        }).join('')}  
      `
    }

    return Object.assign({}, {
      render,
    })

功能项目列表（项目列表id）{
const onclick_处理程序=（事件）=>{
event.preventDefault（）；
console.log（`I was clicked！！！`）
返回false；
}
常量渲染=（）=>{
log（“我被渲染了！！！”）
articleElement=document.getElementById（项目列表id）
articleElement.innerHTML=`

${some_array_of_items.map（item=>{
返回`

`
}).join（“”）}
`
}
返回Object.assign（{}{
提供，
})

在这里，我希望a链接能够有一个简单的

onclick=“

html属性，然后调用该函数。我知道我把

.bind（）

或

.apply（）

搞砸了，因为我在

.innerHTML

值中添加了一个字符串，所以我不完全确定是否会因此产生影响

---

我知道有一个答案，但我想我会在这里问，希望得到正确的方向。同样，我知道我可以对此做出反应，但我的练习的目标是学习/理解如何通过不作出反应来做到这一点。谢谢！

不是一次插入HTML，而是在每次迭代中插入一个

元素（不更改同一容器中的HTML，以免损坏现有侦听器）。插入

后，选择

`；
li.querySelector（'a'）。addEventListener（'click'，onclick\u处理程序）；
}
}

如果输入恰好不可信，这可能导致执行任意代码，这是不可取的。在这种情况下，不要插入HTML，在插入LI后设置属性和内容

const li = ul.appendChild(document.createElement('li'));
li.className = "text-sm flex items-center";
li.innerHTML = `<span><a href="#" class="list-checklist"></a></span>`;
const a = li.querySelector('a');
a.dataset.id = item.id;
a.textContent = item.title;

常量li=ul.appendChild（document.createElement（'li'）； li.className=“text sm flex items center”； li.innerHTML=`； 常数a=li.querySelector（'a'）； a、 dataset.id=item.id； a、 textContent=item.title；

---

onclick

是在全局范围内计算的，您不能用它来调用本地函数。工作得很好-谢谢！

const li = ul.appendChild(document.createElement('li'));
li.className = "text-sm flex items-center";
li.innerHTML = `<span><a href="#" class="list-checklist"></a></span>`;
const a = li.querySelector('a');
a.dataset.id = item.id;
a.textContent = item.title;