Vue中的事件与原生中的事件
原生
- 当用户的某个行为触发html元素的某个事件时，对应该事件的构造函数便会生成一个事件对象，记录触发事件的元素、发生时鼠标位置、发生时键盘状态等信息，并且全局的window.event引用指向该事件对象。我们可以利用js操作该对象。例如：
<script>
function whichElement(e){
if (!e) var e = window.event
if (e.target) let targ = e.target
else if (e.srcElement) let targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
let tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)"> //在这里传入操作event
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
在原生中我们要手动的调用event。
Vue中使用v-on
- 使用v-on，绑定handle函数时，分两种状况：
1、不带参数，vue在调用这个函数时，会把$event作为第一个参数传给这个函数。
2、带参数，vue在调用这个函数时，会把开发者的写参数给传给这个函数。
<input type="text" name="input1" @blur="onBlur1">
<input type="text" name="input2" @blur="onBlur2('ss')">
...(methods)
onBlur1(e){
console.log(e.target.name); // input1
},
onBlur2(msg,e){
console.log(msg);// ss
console.log(e);// undefined
},
- 如果想即使用开发者给的，又想使用event，可以手动的添加$event
<input type="text" name="input2" @blur="onBlur2('ss',$event)">
...(methods)
onBlur2(msg,e){
console.log(msg);// ss
console.log(e.target.name)// input2
},
注意！在vue中不能访问event，要使用$event来代替。
关于vue的自定义事件，$emit
- 使用emit函数时，函数的第二个参数及后面的参数为：处理这个事件的回调函数的参数（当只写回调函数名时，没有其它参数时），并且在发送自定义事件后$event指向第二个参数（ps：之前指向原生触发的事件）。
// 自定义组件内容
<button @click="$emit('test','s1','s2')">test</button>
// 使用自定义组件
<test ref="test" @test="doTest"></test>
doTest(arg1,arg2){
console.log(arg1); // 's1'
console.log(arg2); // 's2'
console.log(arguments.length); // 2
console.log($event);// $event is not defined
},
注意！这里的$event是用不了的，必须传入回调函数。
- 回调函数有参数，要使用子组件上送的数据，必须传入$event
<test ref="test" @test="doTest('ss',$event)"></test>
doTest(arg1,e){
console.log(arg1); // 'ss'
console.log(e); // 's1' 这是子组件上送的数据
console.log(arguments.length); // 2
},
- 父组件要使用子组件触发的原生事件，可以在子组件的
event作为参数。
// 自定义组件内容
<button name="btnTest" @click="$emit('test',$event)">test</button>
// 使用自定义组件
<test ref="test" @test="doTest('ss',$event)"></test>
doTest(arg1,e){
console.log(arg1); // 'ss'
console.log(e.target.name); // 'btnTest'
console.log(arguments.length); // 2
},
网友评论