尚硅谷的vue旅程10-vue中的事件处理(绑定监听、事件修饰符、按键修饰符)

1.绑定监听
	1) v-on:xxx="fun"
	2) @xxx="fun"
	3) @xxx="fun(参数)"
	4) 默认事件形参: event， 隐含属性对象:

$event 就是当前触发事件的元素，即使不传 $event，在回调函数中也可以使用 event 这个参数。

2.事件修饰符
	事件修饰符用来控制事件的冒泡和默认行为。
	1) .prevent : 阻止事件的默认行为event.preventDefault()
	2) .stop : 停止事件冒泡event.stopPropagation() 
	
3.按键修饰符
	1) .keycode : 操作的是某个 keycode 值的键
	2) .keyName : 操作的某个按键名的键(少部分)

下列代码示例所得:
		一.绑定的函数中如果不传参数，会有默认的$event参数，可以通过$event.target.innerHTML来获取文本内容
		
		二.事件冒泡的例子：两个div嵌套时，点击内部div，外部div也跟着响应。 
			停止事件冒泡:stopPropogation()  vue中对应的事件修饰符: stop()
			
		三.事件修饰符用来控制事件的冒泡和默认行为。
			1) .prevent : 阻止事件的默认行为event.preventDefault()
			2) .stop : 停止事件冒泡event.stopPropagation()

代码示例

<div id="test"> 
	<h4>1.绑定监听</h4>
	<button @click="test1">test1</button>
	<!-- 传自定义参数 -->
	<button @click="test2('atguigu')">test2</button>
	<!-- 利用默认的$event参数 -->
	<button @click="test3">test3</button>
	<!-- 传入自定义参数 和 默认的$event参数 -->
	<button @click="test4('007',$event)">test4</button>
	
	
	<h4>2.事件修饰符</h4>
	<div style="width: 200px; height: 200px; background-color: red;" @click="test5">
		<!-- 阻止事件冒泡: .stop -->
		<div style="width: 40px; height: 40px; background-color: black;" @click.stop="test6"></div>
		
</div>
	<!-- 阻止跳转网页 (传统方法)preventDefault() 阻止网页默认行为-->
	<a href="http://www.baidu.com" @click.prevent="test8">百度一下</a>
	
	<!-- 按键修饰符(方便地为事件设定触发键) -->
	<input type="text" @keyup.13="test7">
	<!-- <input type="text" @keyup.enter="test7"> -->
</div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	new Vue({
		el:"#test",
		data:{
			test1(){
				alert("test1");
			},
			test2(msg){
				alert(msg);
			},
			test3(event){
				alert(event.target.innerHTML)//显示button的按钮信息
			},
			test4(number,event){
				alert(number + " " + event.target.innerHTML);	
			},
			test5(){
				alert("out");
			},
			test6(){
				// event.stopPropagation(); //阻止事件冒泡的原始写法
				alert("inner");
			},
			test7(event){
				//传统写法
				// if(event.keyCode === 13){
				// 	alert(event.target.value + " " + event.keyCode);//显示输入框中输入的值，问题：任意触发都会引起执行
				// }
				alert(event.target.value);
			},
			test8(){
				alert("百度一下");
			}
			
		}
	})
</script>