Vue事件处理

一：vue中如何绑定事件？
vue事件分为两类，一个是原生dom事件，一个是组件自定义事件，绑定方法类似:

#绑定原生dom事件
<div id="example-1">
  <button v-on:click="handle">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

#绑定自定义事件,通过组件内部 $emit('myEvent')触发
<my-component v-on:myEvent="doSomething"></my-component>

#在自定义组件上绑定原生事件
<my-component v-on:click.native="doSomething"></my-component>

#绑定动态事件,eventName为实例中能够访问到的变量
<my-component v-on[eventName]="doSomething"></my-component>
<my-component @[eventName]="doSomething"></my-component>

二：vue中的事件修饰符

dom原生事件往往我们需要的不只是绑定，我们还需要处理冒泡，捕获，取消默认事件等特殊场景。

vue提供了非常便捷的事件修饰符来方便我们很简单的实现这些功能。
.stop （取消冒泡）
.prevent （取消默认事件）
.capture （捕获阶段执行）
.self （只有event.target 就是当前元素才执行）
.once （只执行一次，执行完就销毁）
.passive （滚动事件允许默认行为和scroll不阻塞执行）
vue 还提供了按键修饰符来实现更多复杂的交互
.enter （回车触发）
.tab （tab键盘触发）
.delete (捕获“删除”和“退格”键)
.esc （esc键触发）
.space （空格键触发）
.up （向上的键触发）
.down（向上的键触发）
.left（向左的键触发）
.right（向右键触发）
.ctrl（ctrl键触发）
.alt（alt键触发）
.shift（shift键触发）
.meta（window键触发）
.left（鼠标左键触发）
.right（鼠标右键触发）
.middle（鼠标中键触发）

使用方法：

<!-- 阻止单击事件继续传播 -->
<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>

事件的基本使用：

1、用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2、事件的回调需要配置在methods对象中，最终会在vm上；
3、methods中配置的函数，不要用箭头函数，否则this就不是vm了；
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象(vc)；
5、@click=“test” 和 @click=“test($event)” 效果一致，但后者可以传参；

核心源码解读

v-on 指令或者@on 实现

• vue通过解析template里的html提取出dom上的所有属性

• // 正则匹配 html字符串里的   a="xx" @a="xx" @click='xxx' v-on:click="xx" 等属性定义字符串  
   var attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; 
   // 正则匹配 动态的属性写法  @[x]="handle1"    v-on[x]=""  :[x]="" 
   var dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
    
  function parseStartTag () {
        var start = html.match(startTagOpen);
        if (start) {
          var match = {
            tagName: start[1],
            attrs: [],
            start: index
          };
          advance(start[0].length);
          var end, attr;
          // 开始匹配，匹配后的属性压入到attrs里
          while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) { 
            attr.start = index;
            advance(attr[0].length);
            attr.end = index;
            match.attrs.push(attr);
          }
          if (end) {
            match.unarySlash = end[1];
            advance(end[0].length);
            match.end = index;
            return match
          }
        }
      }