v-onイベント修飾子
.stop、.prevent、.self、.once、.capture、.passiveの各修飾子をいつ、なぜ使うかを学習します。
「v-onイベント修飾子」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
イベント処理をより簡潔にする
v-on ディレクティブ（短縮記法は @）はイベントリスナーを登録します。イベント修飾子は、伝播の停止やデフォルト動作の防止といった DOM の定型処理を担う接尾辞です。そのため、ハンドラーをロジックに集中させられます。
修飾子が解決する問題
修飾子がない場合、ハンドラー内に event.preventDefault() や event.stopPropagation() の呼び出しといった DOM 用の定型コードを散りばめることになります。修飾子を使えば、それらをテンプレート内で宣言的に記述できます。
.stop と stopPropagation
.stop はイベントが親要素へバブリングするのを停止します。これは event.stopPropagation() を呼び出すのと同じです。
<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
<button @click.stop="onInner">Click</button>
</div>.prevent と preventDefault
.prevent は event.preventDefault() を呼び出します。典型的な用途は、フォームの送信時にページが再読み込みされるのを防ぐことです。
<form @submit.prevent="onSubmit">
<button type="submit">Save</button>
</form>修飾子を組み合わせる
修飾子は組み合わせて使用できます。適用順序が重要で、左から右の順に適用されます。
<a @click.stop.prevent="onClick">Link</a>.self：要素自身のみ
.self は、イベントターゲットが要素自身の場合にのみハンドラーを実行します。バブリングしてきた子要素からのイベントでは実行しません。オーバーレイの背景に最適です。
<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
<div class="modal">...</div>
</div>キー修飾子
キーボードイベントでは、特定のキーを対象にできます。@keyup.enter は Enter キーが離されたときにのみ実行されます。
<input @keyup.enter="search" />その他のキー修飾子
Vue には、よく使うキーのエイリアスが用意されています。.enter、.esc、.tab、.delete、.space のほか、.up や .down のような矢印キー用のエイリアスもあります。
<input @keyup.esc="cancel" @keyup.up="previous" />.once：ハンドラーを1回だけ実行する
.once はハンドラーを最大1回だけ実行し、その後リスナーを削除します。ウェルカム表示を一度だけ閉じるといった処理に便利です。
<button @click.once="initialize">Start</button>.passive でスクロール性能を向上させる
.passive は、ハンドラーが preventDefault() を呼び出さないことをブラウザーに伝えます。ブラウザーが待機せずにスムーズにスクロールできるため、タッチイベントやスクロールイベントの性能が向上します。
<div @scroll.passive="onScroll">...</div>適切な修飾子を選ぶ
.stop— バブリングを停止します。.prevent— デフォルト動作を防ぎます。.self— バブリングしてきた子要素のイベントを無視します。.once— 1回だけ実行します。.passive— デフォルト動作を防止せず、スクロール性能を向上させます。
注意：.passive と .prevent は互いに矛盾するため、組み合わせないでください。
理解度チェック
適切な修飾子を選びます。
まとめ
イベント修飾子を使うと、ハンドラーを簡潔に保てます。
.stop= stopPropagation、.prevent= preventDefault です。.selfは要素自身で発生した場合にのみ実行されます。.enterのようなキー修飾子は、特定のキーを対象にします。.onceはハンドラーを1回実行し、.passiveはスクロール性能を向上させます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「v-onイベント修飾子」レッスンは無料ですか？
はい。「v-onイベント修飾子」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「v-onイベント修飾子」で何を学びますか？
.stop、.prevent、.self、.once、.capture、.passiveの各修飾子をいつ、なぜ使うかを学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「v-onイベント修飾子」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。