Вот интересная проблема: допустим, вы нажимаете кнопку (у которой есть обработчик кликов), а она находится внутри div (у которого есть собственный обработчик кликов).

Какой обработчик кликов срабатывает, обработчик нажатия кнопки, обработчик клика div или и то, и другое?

Здесь вступает в игру распространение события или всплытие. События, например событие щелчка начинается в элементе, в котором они были впервые созданы, затем переходят в их родительский элемент, затем в их прародителя и т. д., пока они не достигнут корня документа, то есть:

<html> // 4. Event finishes here
    <body> // 3. ..then moves here next
        <div> // 2. ..then moves here next
            <button> // 1. Event begins here if button is clicked
               ...

Итак, чтобы ответить на вышеуказанный вопрос, оба обработчика событий button и div будут срабатывать в этом порядке, когда button нажата.

Предотвращение распространения события

Иногда такое поведение нежелательно. Допустим, ваша кнопка открывает диалоговое окно, но нажатие на div закрывает окно, то есть позволяет пользователю «выключить»:

$('button').on('click', function(event) {
 openWindow();
});
$('div').on('click', function(event) {
 closeWindow();
});

Из-за распространения события оба обработчика событий срабатывают при нажатии кнопки (конечно, при условии, что она находится внутри div). Это будет означать, что ваше окно закрывается сразу после открытия. Не круто!

Нет проблем, вы можете остановить всплытие событий с помощью event.stopPropagation ():

$('button').on('click', function(event) {
 openWindow();
 event.stopPropagation();
});
$('div').on('click', function(event) {
 // Doesn’t fire unless --directly-- clicked
 closeWindow();
});

Обработчик кликов div срабатывает только при прямом щелчке по div, то есть не как побочный эффект нажатия кнопки.

Более подробно о распространении событий мы расскажем в этом видео:

JS Dojo: учебные пособия по Javascript с помощью в реальном времени

Поднимите свои навыки до профессионального уровня в живой интерактивной среде программирования с профессиональным экспертом, который смотрит через ваше плечо.

Чтобы узнать больше о JS Dojo и присоединиться к нашей частной бета-программе, посетите нас здесь: https://getjsdojo.com