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>