Vue.jsではv-onディレクティブを使ってテンプレート上でイベントを設定して関数を実行することができます。その際に「イベント修飾子」なるものが用意されています。あまり聞きなれないものかもしれませんが覚えておくと非常に便利ですので、今回はこのイベント修飾子についてまとめていきたいと思います。  

Vue.jsのイベント修飾子でイベント制御のメソッドを呼び出す

JavaScriptの処理において「デフォルトのイベントをキャンセル」したり、親要素へのイベント伝播されることによる「イベントバブリングの防止」といったものはよく使われます。過去記事「javascriptにおけるイベント制御（バブリングを防ぐ・イベントをキャンセルする）」でもまとめていますが、これは都度決まったメソッドを呼び出す必要があるので、実行箇所が多くなると非常に面倒です。   そんな時にはVue.jsに用意されている機能の「イベント修飾子」というものを追加してあげるだけで、これらの処理が簡単に追加することができます。まずはネイティブのJavaScriptでこれらの処理を行う場合を見てみます。

// イベントのキャンセル（preventDefault）
<a href="https://example.com" id="anchor">リンクテキスト</a>
<script>
  const element = document.getElementById('anchor');
  element.addEventListener('click', (event) => {
    event.preventDefault();
    console.log('リンクテキストがクリックされました');
  });
</script>

// イベントのバブリング防止（stopPropagation）
<div id="parent">
  <div id="child"></div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
    parent.addEventListener('click', (event) => {
    console.log('親要素がクリックされました');
  });
child.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('子要素がクリックされました');
});
</script>

  このように必要箇所に合わせてイベントオブジェクトに対して、それぞれのメソッドを実行する必要があります。数が少ない時はそうでもありませんが、多くなってくると毎回するのはかなり面倒ですよね。。   そしてこれらをVue.jsのイベント修飾子を使ってイベント制御をしていきます。まずは同じ処置をVueインスタンスを使った場合で記述していきます。ここでは例として最小限の構成となっております、methodsオプションで関数を定義し、テンプレート（HTML）上にv-onディレクティブ（@で省略可能）でイベントを指定し、その値に呼び出す関数を指定します。ここではデフォルトイベントのキャンセルにa要素のリンククリックを、バブリングの防止に親子要素にそれぞれクリックイベントを設定しています。 【JavaScript（Vue）】

// HTML
<div id="app">
  <a 
    href="https://example.com"
    id="anchor"
    @click="funcHoge()"
  >リンクテキスト</a>
  <div 
    id="parent"
    @click="funcFuga()"
  >
    <div
      id="child"
      @click="funcPiyo()"
    ></div>
  </div>
</div>

// Script
const vueModel = new Vue({
  el: '#app',
  methods: {
    funcHoge() {
      console.log('リンクテキストがクリックされました');
    },
    funcFuga() {
      console.log('親要素がクリックされました');
    },
    funcPiyo() {
      console.log('子要素がクリックされました');
    }
  }
});

  このまま指定したイベントで処理を実行すると、リンクテキストの場合にはデフォルトのイベントがそのまま実行され指定されたURLに遷移してしまいます。また親子要素のクリックでは、子要素のみをクリックしても親要素のイベントが発火され、console上には下記のように出力されてしまいます。 【console】

'子要素がクリックされました'
'親要素がクリックされました'

  そこで、実際にVue.jsのイベント修飾子を使っていきます。本来はmethodsオプションで定義している関数内で処理を追加するのですが、イベント修飾子の場合はテンプレートのv-onディレクディブのオプションとして記述できますので、イベント名にドット繋ぎで続けて記述していくだけでOKです。

// HTML
<div id="app">
  <a 
    href="https://example.com"
    id="anchor"
    @click.prevent="funcHoge()"
  >リンクテキスト</a>
  <div 
    id="parent"
    @click="funcFuga()"
  >
    <div
      id="child"
      @click.stop="funcPiyo()"
    ></div>
  </div>
</div>

  上記ではデフォルトイベントのキャンセルに「.prevent」を、イベントバブリングの防止には「.stop」とイベント修飾子を追加しています。これで実際にそれぞれのイベントを実行すると指定したイベント制御ができているのが確認でき、console上にも下記のような出力が表示されます。 【console】

'リンクテキストがクリックされました'
'子要素がクリックされました'

  このようにVue.jsではイベント修飾子を使って、簡単にイベントの制御を行うことができます。これら以外にも下記のようなイベント修飾子が用意されています。

EVENT.prevent	event.preventDefault();と同じくデフォルトのイベントがキャンセルされる
EVENT.stop	event.stopPropagation();と同じく親要素へのイベント伝播を防ぐ
EVENT.self	eventオブジェクトのtargetが自身の要素である時のみイベントハンドラが呼び出される
EVENT.once	Vueインスタンスが作成された後は1度のみイベントハンドラが呼び出される
EVENT.capture	キャプチャリングフェーズでのイベントリスナで実行（addEventListener(event, handler, true)の第三引数がtrueと同じ）

  よく使うものもあれば、そうでも無いものも含まれていますが、ぜひこれらはまとめて覚えておくことでコードもスッキリきれいに書くことができますね。  

---

  今回はVue.jsでイベント修飾子を使ったイベント制御についてまとめてみました。このようなフレームワークにはとても便利な機能が用意されているのにも関わらず、知らないために使いこなせていないというのがありますね、、これを機会に是非覚えておき、色々と実際のプロジェクトで試してみたいと思います。   （参考にさせて頂いたサイト） Vue.js イベントハンドリング