<commit_before>---
title: Обработка событий
type: guide
order: 9
---

## Подписка на события

Чтобы подписаться на события DOM и выполнить JavaScript-код по их наступлении, примените директиву `v-on`.

Например:

``` html
<div id="example-1">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
```
``` js
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
```

Результат:

{% raw %}
<div id="example-1" class="demo">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>
{% endraw %}

## Обработчики событий

Логика обработки события может быть довольно сложной, так что оставить весь JavaScript-код в значении атрибута `v-on` не всегда возможно. В этом случае `v-on` может принять и название метода, который вы хотите вызвать.

Например:

``` html
<div id="example-2">
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>
```

``` js
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// вызывать методы можно и императивно
example2.greet() // -> 'Привет, Vue.js!'
```

Результат:

{% raw %}
<div id="example-2" class="demo">
  <button v-on:click="greet">Поприветствовать</button>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function (event) {
      alert('Привет, ' + this.name + '!')
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
</script>
{% endraw %}

## Методы и inline-обработчики

Можно связаться с методом не по имени, а вызвав его в JavaScript-выражении:

``` html
<div id="example-3">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>
```
``` js
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
```

Результат:

{% raw %}
<div id="example-3" class="demo">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
{% endraw %}

Иногда и в inline-обработчиках оказывается необходим доступ к оригинальному событию DOM. Его можно передать в метод, используя специальную переменную `$event`:

``` html
<button v-on:click="warn('Форма пока не может быть отправлена.', $event)">Отправить</button>
```

``` js
// ...
methods: {
  warn: function (message, event) {
    // теперь у нас есть доступ к нативному событию
    if (event) event.preventDefault()
    alert(message)
  }
}
```

## Модификаторы событий

Очень часто возникает необходимость вызвать `event.preventDefault()` или `event.stopPropagation()` в обработчике события. Хотя это легко можно сделать внутри метода, было бы лучше сохранить чистоту логики и абстрагироваться от деталей реализации событий DOM.

Для решения этой задачи Vue предлагает **модификаторы событий** для `v-on`. Напомним, что модификаторы директив указываются как постфиксы и отделяются точкой.

- `.stop`
- `.prevent`
- `.capture`
- `.self`
- `.once`

``` html
<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу --><commit_msg>events.md добавлены переносы в примере<commit_after>---
title: Обработка событий
type: guide
order: 9
---

## Подписка на события

Чтобы подписаться на события DOM и выполнить JavaScript-код по их наступлении, примените директиву `v-on`.

Например:

``` html
<div id="example-1">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
```
``` js
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
```

Результат:

{% raw %}
<div id="example-1" class="demo">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>
{% endraw %}

## Обработчики событий

Логика обработки события может быть довольно сложной, так что оставить весь JavaScript-код в значении атрибута `v-on` не всегда возможно. В этом случае `v-on` может принять и название метода, который вы хотите вызвать.

Например:

``` html
<div id="example-2">
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>
```

``` js
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// вызывать методы можно и императивно
example2.greet() // -> 'Привет, Vue.js!'
```

Результат:

{% raw %}
<div id="example-2" class="demo">
  <button v-on:click="greet">Поприветствовать</button>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function (event) {
      alert('Привет, ' + this.name + '!')
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
</script>
{% endraw %}

## Методы и inline-обработчики

Можно связаться с методом не по имени, а вызвав его в JavaScript-выражении:

``` html
<div id="example-3">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>
```
``` js
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
```

Результат:

{% raw %}
<div id="example-3" class="demo">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
{% endraw %}

Иногда и в inline-обработчиках оказывается необходим доступ к оригинальному событию DOM. Его можно передать в метод, используя специальную переменную `$event`:

``` html
<button v-on:click="warn('Форма пока не может быть отправлена.', $event)">
  Отправить
</button>
```

``` js
// ...
methods: {
  warn: function (message, event) {
    // теперь у нас есть доступ к нативному событию
    if (event) event.preventDefault()
    alert(message)
  }
}
```

## Модификаторы событий

Очень часто возникает необходимость вызвать `event.preventDefault()` или `event.stopPropagation()` в обработчике события. Хотя это легко можно сделать внутри метода, было бы лучше сохранить чистоту логики и абстрагироваться от деталей реализации событий DOM.

Для решения этой задачи Vue предлагает **модификаторы событий** для `v-on`. Напомним, что модификаторы директив указываются как постфиксы и отделяются точкой.

- `.stop`
- `.prevent`
- `.capture`
- `.self`
- `.once`

``` html
<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу -->
{'fraction_non_alphanumeric': 0.16677618609541334, 'fraction_numerical': 0.006308319095807596, 'mean_word_length': 3.508293838862559, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 95, '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': '3357795', 'n_tokens_mistral': 3161, 'n_tokens_neox': 3403, 'n_words': 760}