事件处理 · JS与WEB前端框架技术

# 事件处理 ## [监听事件](https://cn.vuejs.org/v2/guide/events.html#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6 "监听事件") 可以用`v-on`指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例： ~~~ <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 } }) ~~~ 结果： Add 1 The button above has been clicked 0 times. ## [事件处理方法](https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95 "事件处理方法") 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在`v-on`指令中是不可行的。因此`v-on`还可以接收一个需要调用的方法名称。示例： ~~~ <div id="example-2">  <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!' ~~~ 结果： Greet ## [内联处理器中的方法](https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95 "内联处理器中的方法") 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法： ~~~ <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) } } }) ~~~ 结果： Say hiSay what 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量`$event`把它传入方法： ~~~ <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ~~~ ~~~ // ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } } ~~~ ## [事件修饰符](https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6 "事件修饰符") 在事件处理程序中调用`event.preventDefault()`或`event.stopPropagation()`是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为`v-on`提供了**事件修饰符**。之前提过，修饰符是由点开头的指令后缀来表示的。 * `.stop` * `.prevent` * `.capture` * `.self` * `.once` * `.passive` ~~~  <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>   <div v-on:click.self="doThat">...</div> ~~~ 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用`v-on:click.prevent.self`会阻止**所有的点击**，而`v-on:click.self.prevent`只会阻止对元素自身的点击。 > 2.1.4 新增 ~~~  <a v-on:click.once="doThis"></a> ~~~ 不像其它只能对原生的 DOM 事件起作用的修饰符，`.once`修饰符还能被用到自定义的[组件事件](https://cn.vuejs.org/v2/guide/components-custom-events.html)上。如果你还没有阅读关于组件的文档，现在大可不必担心。 > 2.3.0 新增 Vue 还对应[`addEventListener`中的`passive`选项](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters)提供了`.passive`修饰符。 ~~~    <div v-on:scroll.passive="onScroll">...</div> ~~~ 这个`.passive`修饰符尤其能够提升移动端的性能。不要把`.passive`和`.prevent`一起使用，因为`.prevent`将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive`会告诉浏览器你*不*想阻止事件的默认行为。 ## [按键修饰符](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6 "按键修饰符") 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为`v-on`在监听键盘事件时添加按键修饰符： ~~~  <input v-on:keyup.enter="submit"> ~~~ 你可以直接将[`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 ~~~ <input v-on:keyup.page-down="onPageDown"> ~~~ 在上述示例中，处理函数只会在`$event.key`等于`PageDown`时被调用。 ### [按键码](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81 "按键码") `keyCode`的事件用法[已经被废弃了](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)并可能不会被最新的浏览器支持。使用`keyCode`特性也是允许的： ~~~ <input v-on:keyup.13="submit"> ~~~ 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名： * `.enter` * `.tab` * `.delete`(捕获“删除”和“退格”键) * `.esc` * `.space` * `.up` * `.down` * `.left` * `.right` 有一些按键 (`.esc`以及所有的方向键) 在 IE9 中有不同的`key`值, 如果你想支持 IE9，这些内置的别名应该是首选。你还可以通过全局`config.keyCodes`对象[自定义按键修饰符别名](https://cn.vuejs.org/v2/api/#keyCodes)： ~~~ // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ~~~ ## [系统修饰键](https://cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE "系统修饰键") > 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”。例如： ~~~  <input @keyup.alt.67="clear">  <div @click.ctrl="doSomething">Do something</div> ~~~ 请注意修饰键与常规按键不同，在和`keyup`事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住`ctrl`的情况下释放其它按键，才能触发`keyup.ctrl`。而单单释放`ctrl`也不会触发事件。如果你想要这样的行为，请为`ctrl`换用`keyCode`：`keyup.17`。 ### [`.exact`修饰符](https://cn.vuejs.org/v2/guide/events.html#exact-%E4%BF%AE%E9%A5%B0%E7%AC%A6 ".exact 修饰符") > 2.5.0 新增 `.exact`修饰符允许你控制由精确的系统修饰符组合触发的事件。 ~~~  <button @click.ctrl="onClick">A</button>  <button @click.ctrl.exact="onCtrlClick">A</button>  <button @click.exact="onClick">A</button> ~~~ ### [鼠标按钮修饰符](https://cn.vuejs.org/v2/guide/events.html#%E9%BC%A0%E6%A0%87%E6%8C%89%E9%92%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6 "鼠标按钮修饰符") > 2.2.0 新增 * `.left` * `.right` * `.middle` 这些修饰符会限制处理函数仅响应特定的鼠标按钮。 ## [为什么在 HTML 中监听事件?](https://cn.vuejs.org/v2/guide/events.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8-HTML-%E4%B8%AD%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6 "为什么在 HTML 中监听事件?") 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用`v-on`有几个好处： 1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。 3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。