JavaScriptの要素のイベント発火順序

特定イベントの前に処理を行いたかった時に発火順序がはっきりわからなかったので調べました。

検証コード

検証するイベントについては、以下のイベント一覧から利用頻度の高いor気になるものを抜粋しました。
https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects
また、複数のイベント間でどうなるかも調べました。

行った操作としては、クリックでフォーカスを当て、その後文字入力を行いました（複数あった場合はそれぞれ）

単体の要素

<input
       type="text"
       placeholder="要素A"
       onbeforeinput="console.log('beforeinputイベント')"
       onchange="console.log('changeイベント')"
       onclick="console.log('clickイベント')"
       onclose="console.log('closeイベント')"
       oninput="console.log('inputイベント')"
       onkeydown="console.log('keydownイベント')"
       onkeypress="console.log('keypressイベント')"
       onkeyup="console.log('keyupイベント')"
       onmousedown="console.log('mousedownイベント')"
       onmouseenter="console.log('mouseenterイベント')"
       onmouseleave="console.log('mouseleaveイベント')"
       onmousemove="console.log('mousemoveイベント')"
       onmouseout="console.log('mouseoutイベント')"
       onmouseover="console.log('mouseoverイベント')"
       onmouseup="console.log('mouseupイベント')"
       onblur="console.log('blurイベント')"
       onfocus="console.log('focusイベント')"
>

複数の要素間

<input
       type="text"
       placeholder="要素A"
       onbeforeinput="console.log('要素Abeforeinputイベント')"
       onchange="console.log('要素Achangeイベント')"
       onclick="console.log('要素Aclickイベント')"
       onmousedown="console.log('要素Amousedownイベント')"
       onmouseup="console.log('要素Amouseupイベント')"
       onblur="console.log('要素Ablurイベント')"
       onfocus="console.log('要素Afocusイベント')"
>
<input type="text" placeholder="要素B"
       onmousedown="console.log('要素Bmousedownイベント')"
       onclick="console.log('要素Bclickイベント')"
       onfocus="console.log('要素Bfocusイベント')"
>

結論

単体の要素

"mouseoverイベント"
"mouseenterイベント"
"mousemoveイベント"
"mousedownイベント"
"focusイベント"
"mouseupイベント"
"clickイベント"
"keydownイベント"
"keypressイベント"
"beforeinputイベント"
"inputイベント"
"keyupイベント"
"mousemoveイベント"
"mouseoutイベント"
"mouseleaveイベント"
"changeイベント"
"blurイベント"

※見やすさのためにmousemoveイベントを一部削除しています

複数の要素間

"要素Amousedownイベント"
"要素Afocusイベント"
"要素Amouseupイベント"
"要素Aclickイベント"
"要素Abeforeinputイベント"
"要素Bmousedownイベント"
"要素Achangeイベント"
"要素Ablurイベント"
"要素Bfocusイベント"
"要素Bclickイベント"