时间戳

首页 > 解决方案 > 如何向页面中的所有元素添加多个 onclick 事件

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>
...

我想缩小 HTML 代码，如下所示：<a>Lorem</a><a>ipsum</a>
How can I add onclick prompt event to all clickable elements in a page? 如上面的代码。可能吗？

标签： javascriptjqueryonclick

解决方案

使用 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>

推荐阅读