イベントハンドラとは？
イベントに紐づける処理内容のことです。
ハンドルとは？
イベントと、イベントハンドラを紐づけることです。
v-onディレクティブ
Vue.jsでは、紐づけのためには「v-onディレクティブ」を使います。
v-onディレクティブの注意点
v-onディレクティブでイベントハンドラ登録ができるのはelオプションで指定したコンポーネントのスコープ内にある要素に限られます。（要は<div id="app"></div>だったり、ブラウザのウインドウ自体に発生するイベントはv-onでは検知できません。）
具体的にはページが読み込まれた際に発生するloadイベントやウインドウサイズが変更した際に発生するresizeイベント、ページをスクロールさせた際に発生するscrollイベント等が該当します。
コンポーネントのスコープ外のイベントハンドリングの実装
createdまたはmountedにaddEventListenerを実装して、beforeDestroyでremoveEventListenerを実装してイベントリスナーを削除すると良いでしょう。
Vue.jsでのイベントハンドラの種類
メソッドイベントハンドラ
Vueインスタンスのmethodsオプションに定義されているメソッド名を指定します。
インラインメソッドハンドラ
ディレクティブの値に直接JavaScriptの式を書き込むことができます。短い式の場合は活用するようにしましょう。
イベントハンドラが受け取るオブジェクト
$event
「イベントオブジェクト」を表す変数で、イベントの発生元を表すオブジェクト（resizeイベントであればwindowオブジェクト）のことです。
イベントオブジェクトの取得方法
下記のようにv-onで呼び出す関数の引数にeventという引数を渡してあげます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app"> <p v-on:click="click">clickしてください。</p> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function (event) { console.log(event); } } }) </script> |
キー修飾子
v-onのイベントkeydown、keyupで使える修飾子のことです。
例
例えば下記のサンプルであれば、keyupイベントに対して、「enter」という修飾子を付加することによってテキストボックスにenterキーを入力したタイミングのみキーアップイベントが動作するようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app"> <input type="text" v-on:keyup.enter="click"> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function () { console.log('キーアップ'); } } }) </script> |
複数修飾子を適用する。
下記のようにしてつなげる事もできます。
|
1 2 3 |
<div id="app"> <input type="text" v-on:keyup.enter.space="click"> </div> |
この記事へのコメントはありません。