如何使用功能性 vanilla 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,})

在这里，我希望链接能够有一个简单的 onclick="" html 属性，然后调用该函数。我知道我弄乱了我的 .bind() 或 .apply() 并且，因为我将一个字符串附加到 .innerHTML 值，我不完全确定那里是否有影响，因为

我知道有一个答案，但我想我会在这里问，希望能指出正确的方向。同样，我知道我可以通过 React 来做到这一点，但我练习的目标是学习/理解如何在没有 React 的情况下做到这一点。谢谢！

解决方法

不是一次插入所有 HTML，而是在每次迭代时插入一个 <li> 元素（不要更改同一容器内的 HTML，以免损坏现有的侦听器）。插入 <li> 后，选择 <a> 并使用 addEventListener 添加一个侦听器。

const render = () => {
  const parent = document.getElementById(article_list_id);
  parent.textContent = '';
  const ul = parent.appendChild(document.createElement('li'));
  for (const item of some_array_of_items) {
    const li = ul.appendChild(document.createElement('li'));
    li.className = "text-sm flex items-center";
    li.innerHTML = `<span><a href="#" class="list-checklist" data-id="${item.id}">${item.title}</a></span>`;
    li.querySelector('a').addEventListener('click',onclick_handler);
  }
}

如果输入不可信，则可能导致任意代码执行，这是不可取的。在这种情况下，不要插入到 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;