Neurons to bytes

Мало кто знает, как работают события в Javascript. Сейчас же модно юзать фреймворки, вот люди и не задумываются, как оно там работает и зачастую, тратят очень много времени на простые вещи.

Я расскажу про такую широко известную в узких кругах фишку, как event bubbling. Что это вообще такое?

Когда мы кликаем по-какому либо элементу на странице, то событие поднимается по всем родительским узлам кликнутого элемента, пока не дойдет до узла document. Это и есть event bubbling.
Посмотрим наглядно как это работает, ведь лучше увидеть, чем сказать тысячу слов.

Есть HTML:

<div id="dialog">
    I'm a absolutely positioned dialog. So click me!
</div>

Есть CSS:

<style type="text/css">
#dialog {
    padding: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid #000;
    background: #ddd;
}
</style>

И, самое главное, есть javascript (JQuery):

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').click(function(e) {
        alert('Clicked on dialog!');
    })

    $(document).click(function(e) {
        alert('Clicked on document!');
    })
});
</script>

Как видно по коду, у нас навешаны колбэки на клик по диалогу, а так же на клик по документу. Давайте теперь откроем рабочий пример и кликнем по диалогу. Что получилось? А получилось 2 алерта, алерт диалога и алерт документа. Почему так вышло, мы же кликнули только по диалогу? Причина этого именно в event bubbling’е.

Давайте теперь сделаем так, чтобы при клике по диалогу появлялся только алерт этого диалога. Все, что нужно сделать, это отменить event bubbling, чтобы он не поднимался вверх по DOM узлам. Сделать это можно просто добавив e.stopPropagation() в колбэк диалога. Все. Давайте посмотрим второй пример.

Вот так, вроде простая вещь - но знают о ней немногие. Ее знание сильно облегчает разработку на javascript. Как, например, без особых извращений сделать так, чтобы какой-либо элемент на странице скрывался при клике вне этого элемента? Только через event bubbling!

До скорого.