Делегирование в 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)
                var 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,
                var target = event.CurrentTarget || event.srcElement;
                if (target.tagName == 'LI') {
                    target.classList.toggle("list-decor"); // Если у текущего элемента есть класс list-decor - убрать класс list-decor
                }
            };
        </script>
    </body>
</html>

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

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