文法

【Nuxt.js】Nuxt文法編:イベント修飾子

前置き

今回はイベントハンドラ内で
event.preventDefault()などの関数を
簡単に呼び出せるイベント修飾子です❤️

公式: イベント修飾子

⬇️イベントの基礎構文は
 こちらをご確認ください👀



使い方と対応イベント

@click.修飾子="methods名"

イベントでは
様々な修飾子(event modifiers)が使えます!
それぞれの意味を理解し、
親につけるのか❓
子につけるのか❓
着目してみてください👀

修飾子は繋げられるので
@click.stop.prevent
のようにも使えます。
(ただ具体的な使用例をあまり見ません🤔)

ほとんどはcilckイベント(@click)で
使用しますが、
preventの時は
formタグ内の@submitが主です。


stop

Event.stopPropagation()を呼び出します🎻
子から親へのイベントの伝搬を止めます🛑✋

子をクリックした時に
子 → 親 の順で発生するものが
子だけに留まります。

ありなし比較

.stopなし

親子でmethodsを別々にしていても
親に伝搬します(親のmethodsを呼び出す)


.stopあり

子に.stopをつけることで
親への伝搬を止め、
子のみmethodsを実行します🌟


prevent

Event.preventDefault()を呼び出します🎻
本来の挙動を妨げます。

⬇️こちらで使用しました💫
【Nuxt.js】v-model実践編:オリジナルフォームの簡単な作り方

buttonform送信する時や
input入力後にエンターを押した際、
本来はリロードします。
それを防ぐために使われます🛑✋


capture

addEventListener()
optionsのcaptureを呼び出します🎻
子を押した時のイベントの発生順が
子 → 親 ではなく
親 → 子 になります。

.captureは親につけます。

ありなし比較

.captureなし

.captureあり


self

Event.target
その要素自身の時のみイベントが発生💥

通常は子でイベントが発生すると
子 → 親 で伝搬しますが
親は自分がクリックされた時だけ
イベント発生したい場合に使います。

stopとほとんど同じように見えますが
同じイベント名を使っている時なんかに
使うのかもしれませんね🤔
そもそもそれなら別のイベント名にした方が
設計的に良い気はします💭

ありなし比較

selfなし

分かりにくいですが、
子 → 親 の計2回
イベントが発生しています。

selfあり


once

addEventListener()
optionsのonceを呼び出します🎻
イベントの発火を1回に制限します。

おっ、formのボタンにつけて
多重送信の防止ができそう💡😀

と、思いきや、、、

1度呼び出した後に削除されてしまうので
何かしらのエラーで送信できなかった場合、
再度送信ができません😩💦

実装したい場合は
この記事が参考になります❤️👀
setTimeoutを使って
実装されているようですね👏
https://qiita.com/ryo511/items/2563bb61b4b4d1be9619


passive

addEventListener() optionsのpassive

preventDefault()を呼び出さないことを明示します。
Scroll Jankの解決策として利用されます。

こちらの記事が参考になります❤️👀
passive: trueでなぜパフォーマンスがよくなるの?簡単な説明と使い方!


native

子にあるinputのイベントを
親で使いたい時になどに使用します。

こちらで使用しました!
ありなし比較もこちらで確認できます✨👀
【Nuxt.js】Nuxt文法編:v-model②


まとめ

様々な関数を修飾子として
サラッと使えるのは便利ですね💕

個人的にはselfの使い道が
どこなのかパッとしないので、
こんな時に使うと良いよ!!!
などがあれば教えていただけると嬉しいです🙌

-文法

© 2020 aLiz Nuxt