Pages Menu Stijit.com
Twitter
Categories Menu
Делегирование в javascript

Делегирование в javascript

Делегирование в javascript — это возможность обрабатывать дочерние элементы через один родительский. Эта гибкая и удобная техника используется для того, чтобы не присваивать куче дочерних элементов разные id, а обрабатывать действия с ними через их родительский элемент.

document.getElementById('menu').onclick = function(e) {
  e.target //Вернет дочерний DOM обьект на котором произошло событие
  e.CurrentTarget //Добавляют для браузерной совместимости (поддерживается IE9+)
  window.event.srcElement //Добавляют для поддержки старых IE < 9
  e.clientX //Возвращает координату X мыши в момент срабатывания события
  e.clientY //Возвращает координату Y мыши в момент срабатывания события
}

Цель: Есть маркированный список:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Нужно сделать так, чтобы при наведении курсора мыши на каждый элемент списка, у него менялись стили (фон, цвет, жирное начертание, выбираете на свой вкус). Если курсор мыши уходит с элемента, возвращать его стили, что были до этого. Нужно использовать делегирование событий. Т.е. вешаем обработчик на главный элемент списка (ul).
Используем свойство classList для добавления и удаления классов.

Вариант 1 - обработка через делегирование и 2 функции

Делаем две функции: 1 - на наведение курсора, 2 - на убирание курсора.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
</head>
<body>

<style>
  #menu { list-style-type: none; width: 70px; }
  #menu li { padding: 10px; }
  .list-decor { border: 2px solid #eee; border-radius: 8px; font-weight: bold; font-size: 16px; padding: 5px; width: 50px; }
</style>

<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>

document.getElementById('menu').onmouseover = function(e) { // Вешаем обработчик

  var event = e || window.event, // Получаем event.target (вариант window.event дописываем для поддержки старых IE)
      target = event.CurrentTarget || event.srcElement; //Вариант event.srcElement дописываем для поддержки старых IE

  if (target.tagName == 'LI') { //Проверяем, интересует ли нас это наведение курсора? Если он не на li, то нет
    target.classList.toggle("list-decor"); //Если у текущего li нет класса list-decor - дошить к нему класс list-decor
  }
};

document.getElementById('menu').onmouseout = function(e) {
  var event = e || window.event,
      target = event.CurrentTarget || event.srcElement;
  if (target.tagName == 'LI') {
    target.classList.toggle("list-decor"); //Если у текущего элемента есть класс list-decor - убрать класс list-decor
  }
};

</script>
</body>
</html>

Вариант 2 - делегирование и одна функция

Делаем одну функцию, которая будет менять класс и стили в зависимости от того, что мы ей передадим. При наведении курсора передаем одно слово, при убирании курсора - другое.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *