JavaScript с нуля

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

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

Чтобы прекратить существование события, можно использовать метод stopPropagation в объекте Event:

function handleClick(e) {

e. stopPropagation();

// что-нибудь делает

}

Метод stopPropagation прекращает движение события по фазам. Обратившись к предыдущему примеру, давайте предположим, что вы прослушиваете событие click в элементе three_a и хотите помешать этому событию распространиться. В этом случае код будет выглядеть так:

let theElement = document.querySelector("#three_a");

theElement.addEventListener("click", doSomething, true);

function doSomething(e) {

e. stopPropagation();

}

В данном случае при нажатии на buttonOne путь нашего события будет выглядеть так:

Событие click начнет быстрое движение вниз по дереву DOM, уведомляя каждый элемент на своем пути к buttonOne. Так как элемент three_a прослушивает событие click во время фазы погружения, будет вызван связанный с ним обработчик событий:

function doSomething(e) {

e. stopPropagation();

}

Как правило, события не продолжают распространение, пока взаимодействие с активированным обработчиком событий не будет завершено. Поскольку обработчик событий для three_a настроен реагировать на событие click, происходит вызов обработчика событий doSomething. Событие попадает в состояние задержки до тех пор, пока обработчик событий doSomething не будет выполнен и возвращен.

В данном случае событие не будет распространяться. Обработчик событий doSomething оказывается его последним клиентом благодаря функции stopPropagation, которая притаилась в тени, чтобы разделаться с событием раз и навсегда. Событие click не достигнет элемента buttonOne и не получит возможности вернуться к корню, как бы печально это ни было.

СОВЕТ

В вашем объекте события существует еще одна функция, с которой вы можете ненароком встретиться, и называется она preventDefault:

function overrideScrollBehavior(e) {

e. preventDefault();

// делает что-нибудь

}

Действия этой функции немного загадочны. Многие HTML-элементы при взаимодействии с ними демонстрируют стандартное поведение. Например, щелчок по текстовой рамке производит переключение на нее и вызывает появление мигающего курсора. Использование колесика мыши в области, допускающей прокрутку, приведет к прокрутке в соответствующем направлении. Щелчок в графе для галочки переключит состояние отметки в положение да/нет. Браузер по умолчанию знает, как обработать встроенные реакции на все приведенные события.

Если нужно отключить это встроенное поведение, можно вызвать функцию preventDefault. Ее нужно вызывать во время реагирования на событие в элементе, чью встроенную реакцию вы хотите проигнорировать. Мой пример применения этой функции можно посмотреть здесь: http://bit.ly/kirupaParallax.

КОРОТКО О ГЛАВНОМ

Ну и как вам эта тема про события с их погружением и всплытием? Лучшим способом освоить принципы работы погружения и всплытия событий будет написание кода и наблюдение за перемещением события по DOM.

На этом мы завершили техническую часть этой темы, но если у вас есть несколько свободных минут, я предлагаю вам посмотреть связанный с ней эпизод Comedians in Cars Getting Coffee, метко названный It’s Bubble Time, Jerry!. Это, вероятно, их лучший эпизод, в котором Майкл Ричардс и Джерри Сайнфелд попивают кофе и беседуют о событиях, фазе всплытия и прочих, на мой взгляд, важных вещах.