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

Question

我有一些我真的很接近能够做到的事情，但我觉得我错过了一些非常明显的事情。我的问题是如何将函数关联到呈现某些 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,
    })

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

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

Answer 1

不是一次插入所有 HTML，而是在每次迭代时插入一个 <li> 元素（不更改 HTML同一个容器，以免破坏现有的听众）。插入 <li> 后，select 插入 <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;

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

How to call an in-scope function from the onclick attribute of an html element using a functional vanilla JS (not-React) component?

javascript

scoping