Как добавить несколько событий 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

Как уже отмечалось, 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>

Answer 2

Используя 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 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, даже если оно становится многословным.Тем не менее, плохо хранить сценариев в HTML, поэтому лучше использовать атрибут данных.

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