vue事件监听
v-on
v-on传参问题
- 方法中只有一个形参，调用方法时
- 传一个参数
方法中的形参值为传入的参数值 - 不传参数（不省略括号）
方法中的形参为undefined - 不传参数（省略括号）
vue默认将浏览器生成的event事件当做对象传入到方法中
- 传一个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1v-on参数问题</title>
</head>
<body>
<div id="info">
<!-- 方法中的形参值为传入的参数值-->
<button @click="btnClick(123)">按钮1</button>
<!-- 方法中的形参为undefined-->
<button @click="btnClick()">按钮2</button>
<!-- vue默认将浏览器生成的event事件当做对象传入到方法中-->
<button @click="btnClick">按钮3</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const info = new Vue({
el : "#info",
data : {
},
methods : {
btnClick(num){
console.log(num);
}
}
})
</script>
</body>
</html>
- 方法中有多个形参（以两个参数为例）
- 传两个参数
方法中的形参值为传入的参数值 - 传一个参数
第一个形参值为传入的参数值，第二个形参值为undefined - 不传参数（不省略括号）
两个形参值都为undefined - 不传参数（省略括号）
vue默认将浏览器生成的event事件当做对象传入到方法中，赋给第一个形参，之后的参数都为undefined - 补充：传多个参数的同时想把event事件传入到方法中，则event要用$event传递
- 传两个参数
v-on修饰符
- stop：阻止事件冒泡
补充：
事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件。
事件冒泡：是自下而上的去触发事件。
xxx.addEventListener("click", function() {
……
}, true/false);
绑定事件方法的第三个参数是控制事件触发顺序是否为事件捕获。true：事件捕获，false（默认）：事件冒泡。故，当你对一个dom节点触发事件时，若外层的节点也设置了相应的事件函数，就会使外层的节点也触发自己的事件函数。
测试事件冒泡，事件捕获
全为false，点击div：只执行div；点击"点一下"按钮：先执行btn再执行div（事件冒泡，自下而上）
全为true，点击div：只执行div；点击"点一下"按钮：先执行div再执行btn（事件捕获，自上而下）
测试代码
<!--事件捕获，事件冒泡-->
<div id="divdiv">
divdivdivdiv
<button id="btnbtn">点一下</button>
</div>
<script>
// 全为false，即事件冒泡
document.getElementById('divdiv').addEventListener("click",function () {
console.log("false:执行divdiv");
},false)
document.getElementById('btnbtn').addEventListener("click",function () {
console.log("false:执行btnbtn");
},false)
// 全为true，即事件捕获
document.getElementById("divdiv").addEventListener("click",function (){
console.log("true:执行divdiv");
},true)
document.getElementById("btnbtn").addEventListener("click",function () {
console.log("true:执行btnbtn");
},true)
</script>
测试v-on的stop修饰符
点击按钮1
点击按钮2，阻止了事件冒泡
点击divdivdivdiv
PS：测试代码在后面
- prevent：阻止目标元素的默认行为（元素必须有默认行为才能被取消）。如：
<a></a>标签的默认行为是点击后自动跳转到指定页面
<input type="submit">标签的默认行为是点击后自动提交
……
点击"CSDN(无prevent)"
点击"提交(无prevent)"
点击prevent修饰的，默认行为被阻止
PS：测试代码在后面
-
{keyCode.key}：键盘上特定键被触发时调用
-
navicat：监听组件根元素的原生事件
（学了组件之后再补充） -
once：只调用一次
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2v-on修饰符</title>
</head>
<body>
<!--<!–事件捕获，事件冒泡–>-->
<!--<div id="divdiv">-->
<!-- divdivdivdiv-->
<!-- <button id="btnbtn">点一下</button>-->
<!--</div>-->
<!--<script>-->
<!-- // // 全为false，即事件冒泡-->
<!-- // document.getElementById('divdiv').addEventListener("click",function () {-->
<!-- // console.log("false:执行divdiv");-->
<!-- // },false)-->
<!-- // document.getElementById('btnbtn').addEventListener("click",function () {-->
<!-- // console.log("false:执行btnbtn");-->
<!-- // },false)-->
<!-- // 全为true，即事件捕获-->
<!-- document.getElementById("divdiv").addEventListener("click",function (){
-->
<!-- console.log("true:执行divdiv");-->
<!-- },true)-->
<!-- document.getElementById("btnbtn").addEventListener("click",function () {
-->
<!-- console.log("true:执行btnbtn");-->
<!-- },true)-->
<!--</script>-->
<div id="info">
<!-- stop修饰符，阻止冒泡事件-->
<div @click="divClick">
divdivdivdiv
<button @click="btn1Click">按钮1</button>
<button @click.stop="btn2Click">按钮2</button>
</div>
<!-- prevent修饰符，-->
<!-- 无prevent修饰-->
<div>
<a href="https://www.csdn.net/" @click="aClick">CSDN(无prevent)</a>
<form action="xxx">
<input type="text" value="tell">
<input type="submit" value="提交(无prevent)" @click="subClick">
</form>
</div>
<!-- 有prevent修饰-->
<div>
<a href="https://www.csdn.net/" @click.prevent="aClick">CSDN</a>
<form action="xxx">
<input type="text" value="tell">
<input type="submit" value="提交" @click.prevent="subClick">
</form>
</div>
<!-- {
keyCode|key}修饰符-->
<div>
<input type="text" @keydown.space="onSpace">
<input type="text" @keyup.h="onH">
</div>
<!-- once修饰符-->
<button @click.once="onceClick">once修饰符</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const info = new Vue({
el : "#info",
data : {
message : "vue yyds"
},
methods : {
// stop修饰符
btn1Click(){
console.log("btn1Clicked");
},
btn2Click(){
console.log("btn2Clicked");
},
divClick(){
console.log("divClicked");
},
// prevent修饰符
aClick(){
console.log("阻止a标签默认的跳转行为");
},
subClick(){
console.log("阻止submit默认的提交行为");
},
<!-- {
keyCode|key}修饰符-->
onSpace(){
console.log("keydown.space");
},
onH(){
console.log("keyup.h");
},
// once修饰符
onceClick(){
console.log("once只调用一次");
}
}
})
</script>
</body>
</html>
v-on:input：监听用户输入
初始状态
用户输入
