Javascript 如何向页面中的所有元素添加多个onclick事件

我有这样的HTML代码

<a onclick="prompt('Complete','Lorem');">Lorem</a>
<a onclick="prompt('Complete','ipsum');">ipsum</a>
<a onclick="prompt('Complete','dolor');">dolor</a>
<a onclick="prompt('Complete','sit');">sit</a>
<a onclick="prompt('Complete','amet');">amet</a>
...

Lorem
乱数假文
多洛
坐
艾米特
...

我想缩小HTML代码，如下所示：

Loremipsum

如何向页面中的所有可单击元素添加onclick提示符事件？如上述代码所示。可能吗

// select all <a> tags
document.querySelectorAll('a')
  // loop over them
  .forEach(a =>
    // append the event by calling addEventListener
    a.addEventListener('click', () => window.prompt('Complete', 'Lorem')))

编辑：我可能应该补充一点，如果列表在将来更改顺序，这可能很难维护，因此最好在HTML中保留一些对提示值的引用，即使它变得冗长。然而，将脚本保存在HTML中是不好的，因此数据属性可能是更好的方法

HTML：

<a data-prompt="Lorem">Lorem</a>
<a data-prompt="ipsum">ipsum</a>
<a data-prompt="dolor">dolor</a>
<a data-prompt="sit">sit</a>
<a data-prompt="amet">amet</a>

document.querySelectorAll('a').forEach(a =>
  a.addEventListener('click', () => window.prompt('Complete', a.dataset.prompt)))

---

正如所指出的，addEventListener是你在这里的朋友

与普通onClick相比，addEventListener的一个主要优点是，以后添加到DOM中的任何元素都将被考虑在内，并且还可以向同一元素添加多个事件侦听器

下面是一个简单的例子。我基本上是将eventListener添加到主体中，过滤掉任何不是链接的元素，然后显示提示，提示用户更改此元素的innerText

document.body.addEventListener（“单击”，（e）=>{
//让我们仅限于一个链接
如果（e.target.tagName！=“A”）返回；
const ret=提示（“确认”，例如target.innerText）；
如果（ret！==null）{
e、 target.innerText=ret；
}
});
a{
文字装饰：下划线；
光标：指针；
}
单击链接以更改内部文本
洛勒姆
乱数假文
多洛
坐
amet
使用JavaScript，您必须使用循环将click处理程序附加到每个项目


函数userPrompt（事件）{
提示（“完成”+事件.target.innerText）；
}
document.querySelectorAll（'a'）.forEach（item=>item.addEventListener（'click'，userPrompt））；

a{
光标：指针
}
Lorem
乱数假文
多洛
坐
amet
阅读。另外一个用于非jquery和jquery示例
document.querySelectorAll('a').forEach(a =>
  a.addEventListener('click', () => window.prompt('Complete', a.dataset.prompt)))