as点击事件无效_【6】Vue中的事件处理

事件处理

Vue中的事件可以分为两类，一类是原生事件（如点击事件），一类是自定义事件（如子组件向父组件传值时触发事件）。事件处理的思路都是用监听的形式对事件名进行监听，当该事件被触发时就执行相应的回调，可以是一段代码，或是一个函数。

1. 对于非常简单的事件处理，我们可以直接在监听事件处直接处理

如点击按钮时打印出字符串click

<button @click="console.log('click')"></button>

2. 在引号内写回调函数名，不带括号

<button @click="handle"></button>

3.在引号内写回调函数，带括号

<button @click="handle()"></button>

第二种和第三种的区别是，第二种是绑定一个回调函数，而第三种本质上和第一种是一样的，带括号的函数是一段JS代码。在使用第三种方式是，我们可以给函数传入参数，并且在不同的地方可以为同一个回调函数传入不同的参数。

原生事件

• 点击事件：@click，回调函数中可以接收一个参数event，可以通过event.screenX和event.screenY拿到鼠标点击的位置
• 滚动条事件：@scroll，回调函数中可以接收一个event参数，在函数中可以通过$event.target拿到滚动条信息

methods:{
            	handle:function(event){
            		console.log(event.target.scrollHeight);//滚动条总高度
            		console.log(event.target.scrollTop);//滚动条距离顶部的高度
            		console.log(event.target.clientHeight);//滚动内容一屏的总高度
            	}
}

• 按键事件（在松开时触发）：@keyup

按键修饰符：用在@keyup之后，监听具体的按键

如我们要在用户按回车键时自动进行登录：

<input @keyup.enter="login"/>

.exact修饰符：只触发精确的事件。

在不加exact修饰符时，上面的输入框按住shift再按回车也会触发login函数，但加了.exact后，只有在不按其他键仅按回车时才会触发login函数。

自定义事件

自定义事件的触发，都是通过$emit()。监听时，也是通过@自定义事件名进行监听。其他方面的处理基本与原生事件相同

事件修饰符

作用：具体化点击事件的效果，用在@绑定的事件之后。可以串联使用，可以只有修饰符不添加回调函数。使用修饰符时要注意顺序，不同的顺序结果也会不同。

• 阻止单击事件继续传播： <a v-on:click.stop="doThis"></a>
  .stop的意义：点击事件的传递分为两个过程，先是从最外层向内部传递的捕获过程，然后是从内部向外部的冒泡过程。也就是说，在不加以阻止的情况下，点击内部元素触发的click事件会向外冒泡，其外部元素的click事件也会被触发。

<div @click="log(1)">
	<button @click="log(0)">0</button>
</div>

上面的代码中，点击button后0和1都会输出（log是自己定义的函数，用于输出），这不是我们想要的结果，此时如果把@click写成@click.stop就可以解决这个问题

• 提交事件不再重载页面： <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>
• 只触发一次点击事件（可用于组件）：<a v-on:click.once="doThis"></a>
• 触发滚动事件时滚动条立刻滚动而不是等待处理函数结束后再滚动
  <div v-on:scroll.passive="onScroll"></div>
• 不同顺序造成的不同结果：用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
• 只会触发一次事件，再次触发无效：<a v-on:click.once="doThis"></a>