Vue.js v-on:Keypressとv-on:keydownとv-on:keyupのイベント実行順序を確認する

Vue.js v-on:Keypressとv-on:keydownとv-on:keyupのイベント実行順序を確認する

Vue.jsで、v-on:Keypressとv-on:keydownとv-on:keyupのイベント実行順序を確認するサンプルコードを記述してます。 「vue3」を使用してます。

環境

  • OS windows10 pro 64bit
  • Vue.js 3.0.0
  • Apache 2.4.43
  • ブラウザ chrome 92.0.4515.107

イベント実行順序を確認

以下は、「v-on:Keypress」と「v-on:keydown」と「v-on:keyup」のイベント実行順序をconsoleに出力して確認するサンプルコードとなります。

※「vue3」は「cdn版」、デザインは「semantic-ui」を使用してます。

「v-on:keydown」、「v-on:Keypress」、「v-on:keyup」の順番で実行されていることが確認できます。