Vue2.0学习--基础--7--事件处理

(day7)

 监听事件-事件处理方法-内联处理器中的方法：使用 v-on 以及给 v-on 绑定事件函数；

事件修饰符-按键修饰符-系统修饰键：在 v-on 事件后面跟的修饰符，来实现一些功能；

为什么在HTML中监听事件？   使用v-on的好处。

一、监听事件、事件处理方法、内联处理器中的方法

监听事件：无非就是 v-on 指令来监听DOM事件，并触发相应的JavaScript代码。

事件处理方法：在实际开发中，事件触发的JavaScript代码可能很复杂，所以我们给 v-on：click=".."，这个等于后面传递一个方法名（不加括号），代表我们的事件处理方法。

内联处理器中的方法：就是在 v-on：click=".." 这里传递了一个方法，然后加上括号直接调用这个方法。这个时候就可以向方法传递 $event  ，这样这个内联处理器就可以访问原始的DOM事件。（记得在这里方法传入了实参，Vue实例中的对应的方法也要定义对应的形参）

二、事件修饰符、按键修饰符、系统修饰符 

1、事件修饰符： 在JavaScript事件处理程序中可以调用 event.preventDefault()、event.stopPropagation()等。

但在Vue中采用了更好的方式：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节——使用 v-on 提供的事件修饰符：
（Vue的这些事件修饰符应该是对原生的事件属性进行了封装，具体要下去了解）

• .stop：stopPropagation()，阻止事件继续传播
• .prevent：preventDefault()，阻止事件的默认行为。这里的 v-on：XX.prevent=“YY”  后面的XX事件被阻止后，然后调用的是YY方法。
• .capture：添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后再交由内部元素进行处理。
• .self：只有当 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的。
• .once：点击事件只会触发一次。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
• .passive：这个 .passive 修饰符尤其能够提升移动端的性能。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

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

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

注意：使用修饰符时，顺序很重要；用 v-on:click.prevent.self 会阻止所有点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2、按键修饰符：Vue允许为 v-on 在监听键盘事件时添加按键修饰符。

<!-- 只有在'key'是'enter'时调用vm.submit() -->
<input v-on:keyup.enter="submit">

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

<input v-on:keyup.page-down="onPageDown">

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

#按键码：KeyCode的事件用法已经被废弃并可能不会被最新的浏览器支持。

为了支持旧浏览器，Vue提供了绝大多数的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

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

# keyCodes

• 类型：｛[key:string]: number | Array<number> ｝
• 默认值：｛｝
• 用法：

  Vue.config.keyCodes = {
      v:86,
      f1:112,
      
      //camelCase不可用
      mediaPlayPause:179,
      
      //取而代之的是kebab-case且用双引号括起来
      'media-play-pause':179,
      up:[38,87]
  }

  <input type="text" @keyup.media-play-pause="method">

  给 v-on 自定义键位别名

3、系统修饰键： 实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

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

 例如：

<!--Alt + C-->
<input v-on:keyup.alt.67="clear">

<!--Ctrl + Click-->
<div v-on:click.ctrl="doSomething">Do something</div>

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

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

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

<!--有且只有Ctrl被按下时触发-->
<button v-on:click.ctrl.exact="onclick"></button>

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

# 鼠标按键修饰符

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

• .left
• .right
• .middle

三、为什么在HTML中监听事件

 这个Vue中的事件监听方式违背了关注点分离（separation of concern）这个长期以来的优良传统。

但是，所有的Vue.js 事件处理方法和表达式 都严格绑定在当前视图的ViewModel上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1. 扫一眼HTML模板便能轻松定位在JavaScript代码中对应的方法；
2. 因为你无需在JavaScript中手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。
3. 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。你无需担心如何处理它。