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

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>

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

下面是一个简单的例子。我基本上是将eventListener添加到主体中,过滤掉任何不是链接的元素,然后显示提示,提示用户更改此元素的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>

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

:

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