如何向页面中的所有元素添加多个onclick事件
如何向页面中的所有元素添加多个onclick事件
提问于 2018-12-18 14:45:09
我有这样的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提示事件添加到页面中的所有可单击元素？和上面的代码一样。有可能吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-12-18 15:16:34
使用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>
Stack Overflow用户
发布于 2018-12-18 15:11:58
就像指出的，addEventListener是你在这里的朋友。
与普通的addEventListener相比，onClick的一个主要优点是以后添加到DOM中的任何元素也将被考虑在内，并且也可以将多个事件侦听器添加到同一个元素中。
下面是一个简单的例子。基本上，我将eventListener添加到主体中，筛选出任何不是A链接的元素，然后显示用户更改该元素的innerText的提示符。
document.body.addEventListener("click", (e) => {
//lets limit to just A links
if (e.target.tagName !== "A") return;
const ret = prompt("Confirm", e.target.innerText);
if (ret !== null) {
e.target.innerText = ret;
}
});a {
text-decoration: underline;
cursor: pointer;
}<div>Click a link to change the innerText</div>
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>
Stack Overflow用户
发布于 2018-12-18 15:03:43
// 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')))forEach可以使用第二个参数，即索引，因此您可以根据数组的值在每个提示符上定义消息。
const promptValue = [
'Lorem',
'ipsum',
'dolor',
'sit',
'amet'
]
document.querySelectorAll('a').forEach((a, i) =>
a.addEventListener('click', () => window.prompt('Complete', promptValue[i])))编辑:我应该补充一点，如果列表将来更改顺序，这可能会变得很难维护，所以最好在中保留对提示值的一些引用，即使它变得冗长。然而，将脚本保存在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>JS
document.querySelectorAll('a').forEach(a =>
a.addEventListener('click', () => window.prompt('Complete', a.dataset.prompt)))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53835512
复制相关文章
相似问题
腾讯云开发者
