javascript - 如何为页面中的所有元素添加多个onclick事件

Question

我有这样的 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>
...

我想缩小 HTML 代码，如下所示:<a>Lorem</a><a>ipsum</a>
如何为页面中所有可点击的元素添加onclick提示事件？如上面的代码所示。可能吗？

Answer 1

使用 JavaScript，您必须通过循环将点击处理程序附加到每个项目。

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}
document.querySelectorAll('a').forEach(item => item.addEventListener('click', userPrompt));
  

a {
  cursor: pointer
}

<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

JQuery 有一个简单的方法来实现这一点。

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}

$('a').on('click', userPrompt);

a {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>