Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2020, 21:40
Интересующийся
Отправить личное сообщение для vlad_kl Посмотреть профиль Найти все сообщения от vlad_kl
 
Регистрация: 16.06.2020
Сообщений: 22

Как повесить событие сразу на несколько одинаковых элементов?
Доброго времени суток.

Подскажите, пжлста. Как повесить событие сразу на несколько одинаковых элементов?
Например. У меня есть 5 спанов. Я хочу повесить событие: при наведении на каждый спан в отдельности - чтоб менялся бэкграунд.

Попытался сделать querySelectorAll - но понял, что событие на полученный массив спанов не вешается. Получается только повесить событие на 1-й спан, как в примере ниже.
Какие есть варианты решения проблемы?

<body>
    <div>
        <span class="span">#1</span>
        <span class="span">#2</span>
        <span class="span">#3</span>
        <span class="span">#4</span>
        <span class="span">#5</span>
    </div>
</body>



let spans = document.querySelector('.span');
let changeColor = () => spans.classList.toggle('redbackground');
spans.addEventListener('mouseover', changeColor);


Я заранее прошу прощения, если мой вопрос покажется вам тупым, я новичок в js, только обучаюсь этому. Но потратил 3-4 часа на гугление и самостоятельный подбор разных вариантов и ничего не придумал и не нашёл.
Спасибо

Последний раз редактировалось vlad_kl, 16.06.2020 в 21:43.
Ответить с цитированием
  #2 (permalink)  
Старый 16.06.2020, 22:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

vlad_kl,
https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2020, 22:16
Аватар для Error
Интересующийся
Отправить личное сообщение для Error Посмотреть профиль Найти все сообщения от Error
 
Регистрация: 30.04.2020
Сообщений: 17

Можно использовать циклы, а можно делегирование событий:
<head>
 <style>
  span{
   display:inline-block;
   padding:1em;
}
 </style>
</head>
<body>
  <div id="spans">
    <span class="span">#1</span>
    <span class="span">#2</span>
    <span class="span">#3</span>
    <span class="span">#4</span>
    <span class="span">#5</span>
  </div>
  <div id="spans2">
    <span class="span">#a</span>
    <span class="span">#b</span>
    <span class="span">#c</span>
    <span class="span">#d</span>
    <span class="span">#e</span>
  </div>
  <script>
   document.getElementById('spans').addEventListener('click', (event)=>{
      const t = event.target.closest('span');
      if(t){event.target.style.backgroundColor="purple"}
    });
    for (let span of document.querySelectorAll('#spans2 span')) {
      span.onclick = () => {
        span.style.backgroundColor = "gold"
      }
    }
  </script>
</body>
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2020, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

делегирование и handleEvent
vlad_kl,
https://learn.javascript.ru/event-delegation
https://learn.javascript.ru/introduc...ik-handleevent
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.span.redbackground{
    background-color: hsla(0, 100%, 50%, 1);
}

</style>
</head>
<body>
    <div>
        <span class="span">#1</span>
        <span class="span">#2</span>
        <span class="span">#3</span>
        <span class="span">#4</span>
        <span class="span">#5</span>
    </div>
<script>
let div = document.querySelector('div');
let changeColor = {
handleEvent(event) {
const target = event.target.closest('.span');
if (!target) return;
target.classList.toggle('redbackground', event.type == 'mouseenter')
}};
div.addEventListener('mouseenter', changeColor, true);
div.addEventListener('mouseleave', changeColor, true);
</script>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2020, 19:03
Интересующийся
Отправить личное сообщение для vlad_kl Посмотреть профиль Найти все сообщения от vlad_kl
 
Регистрация: 16.06.2020
Сообщений: 22

Всем огромное спасибо за помощь. До делегирования событий в этом учебнике ещё не дошёл. А hadnle event как-то туго зашло. Пошёл учить мат часть
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2020, 22:25
Интересующийся
Отправить личное сообщение для vlad_kl Посмотреть профиль Найти все сообщения от vlad_kl
 
Регистрация: 16.06.2020
Сообщений: 22

Дополню.
Нужно было повесить событие на родительский div.
И чуток преобразовать код, добавив event.target.
Ну и условие closest('span'), чтоб при наведении на сам div, он не красился в красный.
Получилось идеально
Ещё раз спасибо за советы.

let spans = document.querySelector('#span');
spans.addEventListener('mouseover', changeColor);
function changeColor (event) {
    let span = event.target.closest('span');
    if (!span) return;
    span.classList.toggle('redbackground');
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
tinymce как запретить перенос элементов?? spiritсашаspirit Элементы интерфейса 2 16.04.2016 19:05
Плагин jQuery - как сгенерить событие? maxapet jQuery 1 31.08.2015 09:44
Как заменить событие hover на событие загрузку страницы onLoad? SkyWay Общие вопросы Javascript 0 21.09.2014 15:06
Как повесить обработчик на событие "вызов функции"? stopkran Общие вопросы Javascript 30 01.01.2011 08:11
Как повесить событие без редактирования файла? bilbas Общие вопросы Javascript 8 11.09.2009 14:17