事件处理

事件处理

这是JS的基础知识,要不然说学VUE,对js的基础知识得多多少少有些了解,js事件指的是可以被Javascript侦测到的行为,通俗的讲就是当用户与Web页面进行某些交互时,解释器就会创建响应的event对象以描述事件信息。


常见的事件有:

  • 用户点击页面上的某项内容
  • 鼠标经过特定的元素
  • 用户按下键盘的某个按键
  • 用户滚动窗口或改变窗口大小
  • 页面元素加载完成或加载失败

vue处理事件

在vue中使用 `v-on` 指令监听DOM事件,在该事件触发是执行绑定的JavaScript代码!

监听DOM:

<div id="app">
  <button type="button" v-on:click="count += 1">点击事件</button>
  <p>点击上边按钮的次数{{ count }}次!</p>
</div>
		
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data:{
	count: 0
  }
})
</script>

Vue事件处理方法

v-on指令中一般是不写事件处理逻辑的,而是将事件处理逻辑封装成一个函数,在mesthods中定义,v-on指令只需要对应绑定该方法即可!

示例:

<div id="app">
	<button type="button" v-on:click="greet">vue事件</button>
</div>

<script>
var app = new Vue({
	el: '#app',
	data:{
		count: 0
	},
	methods:{
		greet: function(event){
			// 'this'在方法里指向当前vue实例
			alert(this.count)
			// 'event'是原生的DOM事件
			if(event){
				alert(event.target.tagName)
			}
		}
	}
})
</script>

 

总结:

  • 定义方法在methods中构造
  • 定义的方法内的this 指向当前vue实例本身
  • 事件还可以通过 app.greet()方式调用

内联处理器中的方法

这个怎么理解呢?其实就是为定义的函数去传参,带参数调用!

例子:

<div id="app">
	<button v-on:click="say('hi')">Say hi</button>
	<button v-on:click="say('what')">Say what</button>
</div>

 

<script type="text/javascript">
var app = new Vue({
	el: '#app',
	methods:{
		say: function(message){
			alert(message)
			}
		}
	})
</script>

 

如果需要在内联处理器中访问原始DOM事件,可以将特殊变量$event参数传入方法

<div id="app">
	<button v-on:click="say('hi', $event)">Say hi</button>
	<button v-on:click="say('what', $event)">Say what</button>
</div>

 

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		methods:{
			say: function(message, event){
				if (event) {
					event.preventDefault()
				}
					alert(message)
					alert(event.target.tagName)
			}
		}
	})
</script>

 

事件修饰符

vue提供事件修饰符的目的是为了定义的方法内只有纯粹的数据逻辑,而不参与处理DOM事件的细节!

.stop 阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

.prevent 提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

.capture添加事件监听器时使用事件捕获模式,一种自上而下的处理方式

即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

.self 事件只在本身处理

<div @click.self="testOnClickMethods">
  testOnClickMethods
  <button @click="onSumClick(1, 2)">onSumClick</button>
</div>

 

默认情况下,当我们点击onSumClick时,事件向上传播,会调用testOnClickMethods。

如果我们不想调用testOnClickMethods的话,可以通过 @click.stop="onSumClick(1, 2)"来阻止事件冒泡,也可以通过 @click.self="testOnClickMethods" , 来规定 testOnClickMethods 事件只由它本身处理

.once 点击事件将只会触发一次,可以用在自定义组件事件上!

<a v-on:click.once="doThis"></a>

.passive 滚动事件的默认行为将会立即触发

<div v-on:scroll.passive="onScroll" >...</div>

在默认情况下滚动的时候,浏览器会在整个事件处理完毕之后再触发滚动,因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault() (通知 Web 浏览器不要执行与事件关联的默认动作)。

.passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消。 这样可有效的提供浏览器的性能。

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

修饰符可以串联

<div @click="testOnClickMethods">
    testOnClickMethods
    <a href="http://www.baidu.com/" @click.prevent.self="alert('http://www.baidu.com/')">
        http://www.baidu.com/

        <button @click="onSumClick(1, 2)">onSumClick</button>
    </a>
</div>

修饰符可以串联,并且在进行修饰符串联的时候,顺序很重要。比如:

  • 如果我们使用 @click.prevent.self="alert('http://www.baidu.com/')" ,
  • 那么不仅阻止了 a标签中前往百度的跳转,也阻止了 a标签的点击事件。
  • 而如果使用 @click.self.prevent="alert('http://www.baidu.com/')" ,
  • 那么只阻止了 a标签的点击事件,在 testOnClickMethods 执行之后会跳转到百度