Задать вопрос
@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.
Спасибо.
  • Вопрос задан
  • 1384 просмотра
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Доделать сайт на Revolution 3
22 нояб. 2024, в 21:44
50000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Ещё заказы