<commit_before>title: イベントのリスニング
type: guide
order: 6
---

イベントリスナを DOM イベントにバインドするために、`v-on` ディレクティブを利用することができます。`v-on` は、イベントハンドラ関数（関数呼び出しのための括弧は不要）と、インライン expression のどちらにもバインドすることができます。ハンドラ関数が提供されている場合には、オリジナルの DOM イベントを引数として取得します。イベントには、イベントが発生した特定の ViewModel を指す特別なプロパティ `targetVM` が付随します:

``` html
<div id="demo">
  <a v-on="click: onClick">Trigger a handler</a>
  <a v-on="click: n++">Trigger an expression</a>
</div>
```

``` js
new Vue({
  el: '#demo',
  data: {
    n: 0
  },
  methods: {
    onClick: function (e) {
      console.log(e.target.tagName) // "A"
      console.log(e.targetVM === this) // true
    }
  }
})
```

## Expression によるハンドラの呼び出し

たくさんの子 ViewModel を生成する `v-repeat` と、`v-on` を同時に利用している時には `targetVM` が便利です。しかしながら、統合された現在のデータオブジェクトと等しい現在のエイリアスを渡す呼び出し expression を使うほうがより便利で明示的でしょう:

``` html
<ul id="list">
  <li v-repeat="item in items" v-on="click: toggle(item)">
    {{text}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#list',
  data: {
    items: [
      { text: 'one', done: true },
      { text: 'two', done: false }
    ]
  },
  methods: {
    toggle: function (item) {
      item.done = !item.done
    }
  }
})
```

もし、 expression ハンドラ内のオリジナルの DOM イベントにアクセスしたいのであれば、`$event` として渡すことができます:

``` html<commit_msg>Fix translation<commit_after>title: イベントのリスニング
type: guide
order: 6
---

イベントリスナを DOM イベントにバインドするために、`v-on` ディレクティブを利用することができます。`v-on` は、イベントハンドラ関数（関数呼び出しのための括弧は不要）と、インライン expression のどちらにもバインドすることができます。ハンドラ関数が提供されている場合には、オリジナルの DOM イベントを引数として取得します。イベントには、イベントが発生した特定の ViewModel を指す特別なプロパティ `targetVM` が付随します:

``` html
<div id="demo">
  <a v-on="click: onClick">Trigger a handler</a>
  <a v-on="click: n++">Trigger an expression</a>
</div>
```

``` js
new Vue({
  el: '#demo',
  data: {
    n: 0
  },
  methods: {
    onClick: function (e) {
      console.log(e.target.tagName) // "A"
      console.log(e.targetVM === this) // true
    }
  }
})
```

## Expression によるハンドラの呼び出し

たくさんの子 ViewModel を生成する `v-repeat` と、`v-on` を同時に利用している時には `targetVM` が便利です。しかしながら、現在反復されているデータオブジェクトと等しい現在のエイリアスを渡す呼び出し expression を使うほうがより便利で明示的でしょう:

``` html
<ul id="list">
  <li v-repeat="item in items" v-on="click: toggle(item)">
    {{text}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#list',
  data: {
    items: [
      { text: 'one', done: true },
      { text: 'two', done: false }
    ]
  },
  methods: {
    toggle: function (item) {
      item.done = !item.done
    }
  }
})
```

もし、 expression ハンドラ内のオリジナルの DOM イベントにアクセスしたいのであれば、`$event` として渡すことができます:

``` html
{'fraction_non_alphanumeric': 0.17259288853375948, 'fraction_numerical': 0.0015980823012385138, 'mean_word_length': 3.7604562737642584, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2189216', 'n_tokens_mistral': 1451, 'n_tokens_neox': 1366, 'n_words': 204}