Задать вопрос
@artekha
javascript

Как повесить событие на элемент с классом?

У меня есть три элемента с одинаковыми классами, например: 
<ul>
    <li class="abc">Item 1</li>
    <li class="abc">Item 2</li>
    <li class="abc">Item 3</li>
  </ul>


Я хочу через js менять бэкграунд у li, но не знаю как сделать так что бы событие навешивалось только на тот элемент, на который я кликнул. Мне нужно делать только через addEventListener, так что через атрибут не предлагайте. Без jquery, на чистом js.
Спасибо.
  • Вопрос задан
  • 1363 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@mydearfriend
Примерно так. не тестировал.
var changeBg = function(){
  this.style.backgroundImage = 'url(path/to/bg.png)';
}
Array.prototype.forEach.call(document.querySelectorAll('.abc'), function(li){
  li.addEventListener('click', changeBg)
})
Ответ написан
Комментировать
Комментировать
@Faliah
Можно воспользоваться "делегацией" событий:
(function (document) {

  var selectedItem = null;

  document.querySelector('ul')
    .addEventListener('click', function(e) {
      if (selectedItem) {
    	  selectedItem.className = selectedItem.className.replace(' selected', '');
      }
    
      if (e.target.className.indexOf('selected') == -1) {
    	  e.target.className += ' selected';
      }   
      selectedItem = e.target;
    });
})(document);


Смотреть на jsfiddle
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
gogolinsky
@gogolinsky
this
Ответ написан
2 комментария
2 комментария
RomanticOS
@RomanticOS
webDeveloper 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>StarHunter</title>
		<link rel="stylesheet" type="text/css" href="style/style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	</head>
	<body>
		<header>
			<nav></nav>
		</header>
		<ul>
			<li class="li">1111</li>
			<li class="li">2222</li>
			<li class="li">3333</li>
		</ul>
		<script>
			$(document).ready(function(){
				$(".li").click(function(){
					var text = $(this).html();
                                        alert(text);
				});
			});
		</script>
	</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Приложение или модуль для Wordpress для учета поездок по QR
25 апр. 2024, в 03:58
10000 руб./за проект
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Ещё заказы