Day 22：「您好，欢迎登入 Vuta 奇幻世界」- 事件处理

Day22-Banner

「灯愣～」

(以下为系统登入事件的自动通知)

「您好，兔兔」
「欢迎登入 Vuta 奇幻世界」

咦 ...？
系统登入事件？
摁，我昨天是有登入没错。

「灯愣～」

咦，这次又是什麽呀？

「您的装备已被竞标，有人出价 300 万兔币」
「按下确定并将装备权限转移至竞标者」

按确ㄉ... 不是啊！
我根本没卖装备好吗？
而且怎麽只有确定钮 ...

这是被盗了吧！？
肯定是被盗了吧！？

不行不行，赶快问客服...

「灯愣～」
「装备权限移交完成。」

靠...不是吧！
连打客服都来不及啊！

可以取消了

我们在 Day20 有大概提到，v-on 可以在元素的事件上绑定一个行为，可以是运算式或者函数。

而且基本上所有的事件都可以，
甚至还可以绑定自订事件！

那我们先来看看之前就看过的，
最简单的用法：

<template>
  <div>
    <div>
      {{info}}
    </div>
    <button @click="info='已移交装备权限'">
      确定
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下确定并将装备权限转移至竞标者"
    }
  }
}
</script>

没错，就是之前介绍过的方式，
直接在按下後的事件设定变数内容。

这是最简单的方式，
但这麽做灵活度太低了！

所以我们在 methods 中定义一个函式，
把现有的功能移进去：

<template>
  <div>
    <div> {{info}} </div>
    
    <button @click="confirm()">
      确定
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下确定以将装备权限转移至竞标者"
    }
  },
  methods: {
    confirm() {
      this.info = '已移交装备权限'
    }
  }
}
</script>

移进去的好处当然就是要加新功能的时候非常方便啦！

比如说我们想要按下按钮时，
也能显示在 console 上，
我们就只需要在 confirm 加一行：

confirm() {
  this.info = '已移交装备权限'
  console.log(this.info)
}

是吧！这样多快呀!

可是如果今天是正常情况，
有取消按钮时，怎麽办呀？

哎呀，这就别烦恼了，
用函数这样就很简单啊！

来直接看看怎麽做吧：

<template>
  <div>
    <div> {{info}} </div>
    
    <button @click="confirm('已移交装备权限')">
      确定
    </button>
    <button @click="confirm('已中断装备移交流程')">
      取消
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下确定以将装备权限转移至竞标者"
    }
  },
  methods: {
    confirm(title) {
      this.info = title
      console.log(this.info)
    }
  }
}
</script>

摁摁，这样是不是就完成啦～
两个按钮都可以用同一个函数罗！

事件们

前面也说了，
既然所有的事件基本上都支援，
但要怎麽样使用他们啊？

我们来看一下这些简单的例子，
应该就能懂罗！

onclick -> v-on:click
ondblclick -> v-on:dblclick
onchange -> v-on:change
oninput -> v-on:input
onfocus -> v-on:focus
onblur -> v-on:blur
ondrag -> v-on:drag
onsubmit -> v-on:submit

还是找不到关联性吗？
那这样：

onclick -> v-on:click
ondblclick -> v-on:dblclick
onchange -> v-on:change
oninput -> v-on:input
onfocus -> v-on:focus
onblur -> v-on:blur
ondrag -> v-on:drag
onsubmit -> v-on:submit

这样可以了吧！！！

没错哦，
其实就是把 on 改成 v-on: 就行了，
那要缩短的话则是用 : 来取代 on。

我们就拿 oninput 事件来玩玩吧！

如果今天想要做出一个，
输入框打了什麽字，旁边就出现什麽字，
该怎麽简单做到呢？

「兔兔，v-model 就可以了！」

哦，不错嘛!
没错哦，v-model 就能解决，

但是 ...
我们这边是讲事件啊啊啊！！！

先讲一下 oninput 事件本身，其实就是 input、select、textarea 元素的 value 被修改时，就会触发到 oninput 事件。

所以同理，我们这边的需求是：

打字 -> 在别处同步显示

如果是以纯 js 来完成的话，之前 day 20 就有看过的相同范例，但我们这边可以少取一个 id，透过事件参数 event 来完成：

<input type="text" id="input" oninput="textSync(event)" />
<div id="show"></div>

<script>
function textSync(event) {
  const show = document.getElementById("show")
  show.innerText = event.target.value
}
</script>

event 是 oninput 事件本身，target 就是发生事件的元素，那我们使用这个 target 去取 value 就等同於我们帮它取个 id 在去抓 value 的动作啦！

注：部分浏览器如 IE 读不到 event.target，必须用 event.srcElement，效果相同。我不知道现在的 IE 还有没有这毛病，毕竟我根本不用。

那你是不是从上面这个互动模式看出什麽端倪了？

「有，因为 vue 也可以这麽做！」
「只是，vue 的 evnet ...？」

好，我讲解一下 vue 中的 event ～
在 vue 中，叫做 $event，
用法一模一样的哦！

既然知道名称切确是什麽了，
就快来试一次吧：

<template>
  <input type="text" @input="textSync($event)" />
  <div>{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    textSync(event) {
      this.content = event.target.value
    }
  }
}
</script>

是不是几乎没两样呢！
反而在显示的部分还更简化了呢～

而有一个魔法指令，其实就跟这个有关呢！

v-model

这个事件有什麽关系呢？

当然有，
因为其实 v-model 就是这样做成的哦！

如果我们透过 v-bind:value 给 input 赋值，
再透过 v-on:input 事件更新，
那不就会跟 v-model 效果一模一样了吗！

让我们直接来看看范例：

<template>
  <!-- v-model -->
  <input v-model="content" />

  <!-- v-bind + v-on -->
  <input :value="content" @input="content = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
}
</script>

这范例连结在文章尾部有～

这样完成了。

不管是在 v-model 的 input 中输入，
或是在我们实作的 input 中输入，
两个 input 的内容都会同步了！

虽然上面这样就差不多了，
不过事件其实还有一个好玩的功能喔！

事件修饰

光看名称可能觉得比较难懂，
什麽是修饰？

事件修饰就是当事件发生时，
我们只知道一个事件触发了，
但其实这样是很不精确的！

以滑鼠的点击来说，
我们触发了滑鼠点击，
但却不知道是按下了左键还右键，
那麽某些使用者行为的处理结果就会很奇怪。

我们可以用 onkeyup 的事件看看。

当键盘按键被按下，
接着按键放开时会触发 onkeyup，
但要是今天一个聊天室，
我们想要做功能是按下 enter 送出，
结果却一打字就一直送出了，
不是很烦吗？

举例：

<template>
  <input type="text" @keyup="sendMsg()" />
</template>

这样任何按键按按下，
再放开时就会触发 sendMsg( )，
太可怕了！

所以我们这时候就必须用到事件修饰啦！

Vue 本身有支援对事件多加上属性来对事件进行修饰，让我们来试试把事件限定在 enter 时才触发：

<template>
  <input type="text" @keyup.enter="sendMsg()" />
</template>

完美！这样简单又明了。现在我们就知道它是按下 enter 时才会呼叫 sendMsg( ) 来送出讯息啦！

我们可以换成玩玩底下这个显示方向键的例子：

<template>
  <div
    @keydown.up="showKey('up')"
    @keydown.down="showKey('down')"
    @keydown.left="showKey('left')"
    @keydown.right="showKey('right')"
    tabindex="0"
  >{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    showKey(key) {
      this.content = {
        "up": "↑",
        "down": "↓",
        "left": "←",
        "right": "→",
      }[key]
    }
  }
}
</script>