{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Определение"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"event.stopPropagation()"},{"type":"text","text":" — это метод объекта события, который "},{"type":"text","marks":[{"type":"bold"}],"text":"останавливает дальнейшее распространение события"},{"type":"text","text":" по дереву DOM."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"},{"type":"hardBreak"},{"type":"text","text":"📌 событие произойдёт на том элементе, где оно случилось,"},{"type":"hardBreak"},{"type":"text","text":"но "},{"type":"text","marks":[{"type":"bold"}],"text":"не поднимется вверх"},{"type":"text","text":" к его родителям."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🌊 Немного про всплытие (bubbling)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"По умолчанию, большинство событий в DOM "},{"type":"text","marks":[{"type":"bold"}],"text":"всплывают"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

\n \n

\n"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"document.querySelector('.parent').addEventListener('click', () => {\n console.log('Родитель');\n});\n\ndocument.querySelector('.child').addEventListener('click', () => {\n console.log('Ребёнок');\n});\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если кликнуть по кнопке ("},{"type":"text","marks":[{"type":"code"}],"text":".child"},{"type":"text","text":"), в консоли будет:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Ребёнок\nРодитель\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Сначала сработал обработчик "},{"type":"text","marks":[{"type":"bold"}],"text":"на кнопке"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а потом событие “всплыло” вверх и вызвало обработчик родителя."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"stopPropagation()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если в обработчике ребёнка вызвать этот метод:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"document.querySelector('.child').addEventListener('click', (event) => {\n console.log('Ребёнок');\n event.stopPropagation(); // ⛔ останавливаем всплытие\n});\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь при клике по кнопке консоль покажет только:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Ребёнок\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Событие "},{"type":"text","marks":[{"type":"bold"}],"text":"не дойдёт до родителя"},{"type":"text","text":", оно “застрянет” на кнопке."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Пример 2: вложенные элементы"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

\n \n

\n"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"outer.addEventListener('click', () => console.log('outer'));\ninner.addEventListener('click', () => console.log('inner'));\nbtn.addEventListener('click', (e) => {\n e.stopPropagation();\n console.log('button');\n});\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📋 При клике на кнопку:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"button\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"inner"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"outer"},{"type":"text","text":" уже не получат событие."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Пример 3: отмена всплытия при делегировании"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если у тебя один обработчик на родителе (например, список элементов),"},{"type":"hardBreak"},{"type":"text","text":"иногда не нужно, чтобы клик по вложенной кнопке срабатывал тоже:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

Элемент 1
Элемент 2

\n"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"list.addEventListener('click', (e) => {\n if (e.target.tagName === 'LI') {\n console.log('Клик по пункту');\n }\n});\n\ndocument.querySelectorAll('button').forEach(btn =>\n btn.addEventListener('click', (e) => {\n e.stopPropagation(); // чтобы родитель не получил событие\n console.log('Удаление элемента');\n })\n);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"клик по "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" → “Клик по пункту”"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"клик по кнопке → “Удаление элемента”"},{"type":"hardBreak"},{"type":"text","text":"и событие не всплывёт до списка."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚫 Важно: что "},{"type":"text","marks":[{"type":"bold"}],"text":"не делает"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"stopPropagation()"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"не отменяет стандартное действие"},{"type":"text","text":" (например, отправку формы или переход по ссылке)."},{"type":"hardBreak"},{"type":"text","text":"Для этого используется "},{"type":"text","marks":[{"type":"code"}],"text":"event.preventDefault()"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"stopPropagation()"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"не мешает срабатывать другим обработчикам"},{"type":"text","text":" на том же элементе."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 Есть ещё более “жёсткий” вариант"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"event.stopImmediatePropagation();\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Останавливает "},{"type":"text","marks":[{"type":"bold"}],"text":"всё"},{"type":"text","text":": и всплытие, и "},{"type":"text","marks":[{"type":"bold"}],"text":"другие обработчики"},{"type":"text","text":" на этом же элементе."},{"type":"hardBreak"},{"type":"text","text":"Полная блокировка дальнейшей обработки."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Метод"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Останавливает всплытие?"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Останавливает другие обработчики?"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"event.stopPropagation()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Прерывает распространение события вверх"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"event.stopImmediatePropagation()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Полностью блокирует дальнейшие обработчики"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"event.preventDefault()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отменяет стандартное действие браузера"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]}]}]},{"type":"horizontalRule"},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧭 "},{"type":"text","marks":[{"type":"bold"}],"text":"Запомни просто:"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"stopPropagation()"},{"type":"text","text":" — «не поднимайся выше»"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"preventDefault()"},{"type":"text","text":" — «не делай стандартное действие»"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"stopImmediatePropagation()"},{"type":"text","text":" — «останови всё, даже соседей»"}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что делает event.stopPropagation()?

Комментарии