Почему событие "change" происходит до события "click"?

Событие "change" происходит до события "click" из-за специфики работы браузера. Когда пользователь изменяет значение в поле ввода, событие "change" срабатывает сразу же после того, как пользователь перестал редактировать поле. Событие "click" срабатывает только после того, как пользователь фактически нажал на кнопку.

Если при клике на кнопку событие change срабатывает раньше, чем событие click, то это может быть связано с тем, что браузер считает изменение текста в поле ввода более важным действием, чем нажатие кнопки. Таким образом, событие "change" срабатывает сразу после изменения значения в поле, независимо от дальнейших действий пользователя.

кликнуть по кнопке, не теряя фокуса с поля 
 
 Это вам кажется. 
 Кнопка получает фокус перед действием. 
 Фокус может быть только на одном элементе. 
 Значит предварительно произойдет снятие фокуса с инпута. 
 
 Последовательность будет такая: 
 input.oninput - input.onblur - input.onchange - button.onfocus - button.onclick