Блог

Главная - Вопросы по программированию - Как прикрепить один клик по нескольким элементам

Как прикрепить один клик по нескольким элементам

#javascript #html

Вопрос:

У меня есть ниже HTML

 <div>
  .. have 10 divs here
</div>

После нажатия на каждый div из них мне нужно получить внутренний HTML-код div , который я нажал, поэтому нужно ли добавлять по 10 кликов на каждый дочерний div, или это можно сделать с помощью одного клика на родительский div?

Ответ №1:

Вы можете использовать addEventListener метод (см. Веб-документы MDN) в родительском div.

 document.getElementById("parent-div").addEventListener("click",(e)=>{
    console.log(e.target.innerHTML);
}) 
 <div id="parent-div">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
    <div>Div 5</div>
</div>

Ответ №2:

Используйте делегирование событий:

 document.addEventListener('click', function(e){
  if(e.target.parentElement.classList.contains("delegate-target"))
    console.log(e.target.innerHTML);
}) 
 <div class="delegate-target">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Ответ №3:

Вы можете использовать этот код.

 const divs = document.querySelectorAll("div div");
[...div].map(val => {
    val.addEventListener("click",() => {console.log(val.innerHTML)});
});


<div>
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

Ответ №4:

Вы можете задать идентификатор для родительского элемента и прикрепить событие щелчка к родителю вместо каждого дочернего элемента, а затем получить e.target при нажатии:

Вот рабочий образец:

 document.querySelector("#parentElement").addEventListener('click', function(e){
    console.log(e.target.innerHTML);
}) 
 <div id="parentElement">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>

</div>
Метки: