pengendalian acara


Direktori

Dengar acara

Anda boleh menggunakan arahan v-on untuk mendengar acara DOM dan menjalankan beberapa kod JavaScript apabila dicetuskan . Contoh: 

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
Keputusan:

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

结果：

2.gif


事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

示例：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

结果：

1.gif


内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

结果：

3.gif


有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>


事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()

🎜🎜🎜

🎜🎜Kaedah pemprosesan acara🎜🎜🎜🎜🎜Walau bagaimanapun, banyak logik pemprosesan acara akan menjadi lebih rumit, jadi tulis kod JavaScript terus dalam < Ini tidak boleh dilakukan dalam arahan kod>v-on. Oleh itu v-on juga boleh menerima nama kaedah yang perlu dipanggil. 🎜🎜🎜example: 🎜
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
e🎜result: 🎜🎜 🎜🎜🎜🎜

🎜🎜Kaedah dalam pemproses sebaris🎜🎜🎜🎜🎜Selain mengikat terus kepada kaedah, anda juga boleh menyelaraskan pernyataan JavaScript Kaedah panggilan: 🎜
<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit">
🎜Keputusan: 🎜🎜🎜🎜🎜🎜🎜 Kadangkala ia juga perlu untuk mengakses acara DOM asal dalam pemproses pernyataan sebaris. Ia boleh dihantar ke dalam kaedah menggunakan pembolehubah khas $event: 🎜
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
🎜🎜🎜

🎜🎜Event modifier🎜🎜🎜🎜🎜 dipanggil dalam acara pengendali event.preventDefault() atau event.stopPropagation() adalah keperluan yang sangat biasa. Walaupun kita boleh melaksanakannya dengan mudah dalam kaedah, adalah lebih baik untuk mempunyai kaedah dengan logik data tulen daripada berurusan dengan butiran acara DOM. 🎜

Untuk menyelesaikan masalah ini, Vue.js menyediakan pengubah suai acara untuk v-on. Seperti yang dinyatakan sebelum ini, pengubah suai diwakili oleh akhiran arahan bermula dengan titik. v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

rrreee

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

rrreee

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。


按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

rrreee

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

rrreee

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。


按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode

  • .berhenti

  • .cegah🎜
  • 🎜.tangkap🎜
  • 🎜.diri🎜
  • 🎜. sekali🎜
  • 🎜.pasif🎜
rrreee
🎜Apabila menggunakan pengubahsuai, susunan adalah penting; dihasilkan dalam susunan yang sama. Oleh itu, menggunakan v-on:click.prevent.self akan menghalang semua klik, manakala v-on:click.self.prevent hanya akan Akan menghalang klik pada elemen itu sendiri. 🎜
🎜Baru dalam 2.1.4🎜
rrreee🎜Tidak seperti pengubah suai lain yang hanya boleh berfungsi pada acara DOM asli, pengubah .sekali juga boleh Digunakan dalam tersuai < a href="/js/js-vuejs-components-custom-events.html" target="_blank">acara komponen. Jika anda belum membaca dokumentasi pada komponen anda, jangan risau sekarang. 🎜
🎜2.3.0 baharu 🎜
🎜Vue juga sepadan dengan Pilihan pasif dalam addEventListener menyediakan pengubah suai .pasif. 🎜rrreee🎜Pengubah suai .pasif ini terutamanya boleh meningkatkan prestasi mudah alih. 🎜
🎜Jangan gunakan .pasif dan .prevent bersama-sama kerana .prevent akan diabaikan dan penyemak imbas mungkin mengeluarkan Anda memaparkan amaran. Ingat, .pasif memberitahu penyemak imbas bahawa anda tidak mahu menyekat kelakuan lalai acara tersebut. 🎜
🎜
🎜

Pengubah suai kunci
🎜Apabila mendengar acara papan kekunci, kita selalunya perlu menyemak ketukan kekunci terperinci. Vue membenarkan menambah pengubah suai utama untuk v-on apabila mendengar acara papan kekunci: 🎜rrreee🎜Anda boleh terus KeyboardEvent.key Mana-mana nama kunci yang sah terdedah ditukar kepada kebab-case sebagai pengubah suai. 🎜rrreee🎜Dalam contoh di atas, fungsi pengendali hanya akan dipanggil apabila $event.key bersamaan dengan PageDown. 🎜🎜
🎜

Kod kunci🎜

🎜Penggunaan acara KeyCodetelah ditinggalkan dan mungkin tidak disokong oleh penyemak imbas terkini. 🎜
🎜Menggunakan atribut keyCode juga dibenarkan: 🎜rrreee🎜Untuk menyokong pelayar lama jika perlu, Vue menyediakan alias untuk kod kunci yang paling biasa digunakan: 🎜

  • .masukkan.enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

rrreee


系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl

  • .alt

  • .shift

  • .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (?)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (?)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

rrreee

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。


.exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

rrreee


鼠标按钮修饰符

2.2.0 新增

  • .left

    • 🎜.tab🎜🎜🎜.delete (menangkap "delete" dan Kekunci "Backspace")🎜🎜🎜.esc🎜🎜🎜.ruang🎜🎜🎜.up < /code>🎜🎜🎜.bawah🎜🎜🎜.kiri🎜🎜🎜.kanan kod>🎜
🎜Sesetengah kekunci (.esc dan semua kekunci anak panah) mempunyai nilai key yang berbeza dalam IE9, If anda ingin menyokong IE9, alias terbina dalam ini harus diutamakan. 🎜
🎜Anda juga boleh melepasi objek config.keyCodes global Alias ​​pengubah suai kunci tersuai: 🎜rrreee🎜
🎜

Kunci pengubah suai sistem < /strong>

🎜2.1.0 Baharu 🎜
🎜Anda boleh menggunakan pengubah suai berikut untuk mencetuskan tetikus atau papan kekunci hanya apabila kekunci yang sepadan ditekan pendengar. 🎜🎜🎜🎜.ctrl🎜🎜🎜.alt🎜🎜🎜.shift🎜 🎜🎜.meta🎜
🎜Nota: Pada papan kekunci sistem Mac, meta sepadan dengan kekunci arahan (?). Pada meta papan kekunci sistem Windows sepadan dengan kekunci logo Windows (?). Pada papan kekunci sistem pengendalian Sun, meta sepadan dengan kekunci permata pepejal (◆). Pada papan kekunci tertentu yang lain, terutamanya pada mesin MIT dan Lisp, dan penggantinya, seperti papan kekunci Knight dan papan kekunci kadet angkasa, meta ditandakan sebagai "META". Pada papan kekunci Symbolics, meta ditandakan sebagai "META" atau "Meta". 🎜
🎜Contohnya: 🎜rrreee
🎜Sila ambil perhatian bahawa kekunci pengubah suai adalah berbeza daripada kekunci biasa Apabila digunakan dengan acara keyup, kekunci pengubah suai mesti ditekan apabila peristiwa itu dicetuskan. Dalam erti kata lain, keyup.ctrl hanya boleh dicetuskan dengan melepaskan kekunci lain sambil menahan ctrl. Hanya melepaskan ctrl tidak akan mencetuskan acara. Jika anda mahukan tingkah laku ini, gunakan keyCode untuk ctrl sebaliknya: keyup.17. 🎜
🎜
🎜

.exact Pengubah suai🎜

🎜2.5.0 Baharu 🎜
🎜.tepat< The / code> modifier membolehkan anda mengawal peristiwa yang dicetuskan oleh gabungan tepat pengubah sistem. 🎜rrreee🎜
🎜

Pengubah suai butang tetikus🎜

🎜 2.2.0 Baharu 🎜
🎜🎜🎜.kiri🎜

  • .kanan.right

  • .middle

    • 这些修饰符会限制处理函数仅响应特定的鼠标按钮。


    为什么在 HTML 中监听事件?

    你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on

    .tengah

    Pengubah suai ini mengehadkan fungsi pengendali untuk hanya bertindak balas kepada butang tetikus tertentu.


    Mengapa mendengar acara dalam HTML?

    Anda mungkin perasan bahawa cara mendengar acara ini melanggar tradisi lama pengasingan kebimbangan. Tetapi jangan risau, kerana semua pengendali dan ekspresi acara Vue.js terikat sepenuhnya pada ViewModel paparan semasa, ia tidak akan menyebabkan sebarang masalah penyelenggaraan. Malah, menggunakan v-on mempunyai beberapa kelebihan:

    🎜　1. Anda boleh mencari kaedah yang sepadan dengan mudah dalam kod JavaScript dengan mengimbas templat HTML. 🎜🎜　2. Kerana anda tidak perlu mengikat acara secara manual dalam JavaScript, kod ViewModel anda boleh menjadi logik yang sangat tulen, dipisahkan sepenuhnya daripada DOM dan lebih mudah untuk diuji. 🎜🎜　3. Apabila ViewModel dimusnahkan, semua pengendali acara akan dipadamkan secara automatik. Anda tidak perlu risau untuk membersihkannya. 🎜🎜🎜🎜🎜 🎜