В каком порядке сработают обработчики клика на div с вложенной кнопкой?

При клике по кнопке внутри div обработчики срабатывают в порядке фаз события: перехват сверху вниз, цель, затем всплытие снизу вверх.

Пример

div.addEventListener('click', () => console.log('div capture'), true);
div.addEventListener('click', () => console.log('div bubble'));
button.addEventListener('click', () => console.log('button'));

Клик по кнопке выведет:

div capture
button
div bubble

Фазы

1. Capture — событие идёт от window вниз к цели; срабатывают обработчики с capture: true.
2. Target — обработчики на самой кнопке.
3. Bubble — событие поднимается вверх, срабатывают обычные обработчики на предках.

Управление

• event.stopPropagation() останавливает дальнейшее распространение;
• event.target — элемент, по которому кликнули (кнопка), event.currentTarget — элемент, где висит обработчик;
• некоторые события (focus, blur) не всплывают — есть аналоги focusin, focusout.

Коротко для собеседования

Сначала обработчики div в фазе перехвата (если есть), затем кнопки, затем div при всплытии; остановить можно stopPropagation().

Подробнее: learn.javascript.ru — Всплытие и погружение