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>

Answer 2

就像指出的那样，addEventListener是您的朋友。

与通常的onClick相比，addEventListener的一个主要优点是，以后添加到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>

Answer 3

// 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中提示值的引用，即使它变得冗长。但是，将 scripts 保留在HTML中是很不好的，因此data属性可能是一种更好的方法。

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

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

3 个答案: