Vue事件处理

Vue中的事件修饰符：

• prevent:阻止默认事件（常用）：超链接中绑定点击事件默认就是超链接的链接（就是点击超链接的时候就不会链接到目标页面，而是触发自己绑定的函数）。
  

<a href="http://www.baidu.com" @click.prevent="showInfo">百度链接</a>

• stop：阻止事件冒泡。

  (当不添加stop的时候会当点击button按钮的时候showInfo函数会被触发两次,但是如果在button的click事件上添加了stop修饰符的话就会，当点击button摁钮的时候showInfo函数就只会触发一次——就是绑定在button上面的这个showInfo函数。)

<div @click="showInfo" class="demo1">
    <button @click.stop="showInfo">阻止冒泡</button><!--这样也可以实现阻止冒泡事件发生(只触发当前的click事件不会触发父元素的click事件 )-->
</div>

• once:事件只触发一次

  （当使用once修饰事件的时候，当页面加载出来的时候once绑定的事件只会被触发一次，然后就不能再次触发了）

• capture:使用事件的捕获模式（简单理解为让某个事件最先被触发）

  （如果一次点击会触发几个函数事件的话，那么被capture修饰的函数会最先被触发，然后其他函数按照原有顺序继续执行。）

<div class="box1" @click.capture="showMsg(1)"><!--不添加.capture的时候点击box2输出的是2 1  添加了之后点击box2输出的是 1 2-->
    div1
    <div class="box2" @click="showMsg(2)">div2</div>
</div>

• self:只有当event.Target是当前的操作元素的时候这个事件才会被触发（操作元素是他的子类的话也不会使其触发）

• passive:事件的默认行为立即执行，无需等待事件的回调执行完毕。（说实话这个我也不是很明白）

  (函数的执行的结果会立刻显示出来，但是函数的回调将会等待一段时间才能执行完毕。)
  这个例子就是说鼠标滚轮滚动的时候不用等待这里的函数执行完毕后然后再去触发页面上面的滚条向下移动 而是鼠标滚轮一旦移动就会触发页面上的滚动条而不用等待函数执行完毕。

<ul class="list" @scroll.passive="demo"><!--sroll检测的是滚动条的滚动， wheel检测的是鼠标上面滚轮滚动触发-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

事件的基本使用：

在绑定绑定事件的时候我们可以选择传递参数或者不传递参数
1.不传递参数的时候他也会有一个默认的参数event里面包含了标签体里面许多的属性。 2.在传递参数的时候为了防止默认的参数弄丢我们会添加一个占位符来保留当前函数的默认参数。

<button v-on:click="showInfo1">（不传参数）点我提示信息1</button>
<button @click="showInfo2(66,$event)">@click绑定的按钮2</button>
<!--往函数里面传参数为了避免event弄丢我们会添加一个$event来进行占位-->

methods:{
  showInfo1(event){
    alert("同学你好1！")
    console.log('event',event==vm)//false
    console.log(event.target.innerText)//输出的是按钮标签内的内容
    console.log('this',this)///true指的就是vm本身
    console.log(event)
  }
  ,showInfo2(number,a){//这里面的a相当于event
    alert('同学你好2')
    console.log(number)
  }
}

键盘事件

键盘事件使用的比较少，这里我就不一一介绍了。

欢迎大家批评指正