自己个人总结,希望大家能在评论区做出补充
JS
不管是否传入参数都可以使用window.event获取默认参数
不传参数时
<button onclick="test1()">test1</button>
<button onclick="test2()">test2</button>
<script>
function test1() {
console.log(event,"event-test1"); //输出事件默认参数,必须是event
console.log(arguments[0],"arguments[0]-test1");//undefined
}
//错误示范
function test2(event) {
console.log(event,"event-test2");//undefined
console.log(arguments[0],"arguments[0]-test2");//undefined
}
</script>
传入参数时
<button onclick="test4(event,'test4')">test4</button>//必须写event,随便的名字不行
function test4(a,b) {
console.log(a,"a");//输出事件默认参数
console.log(b,"b");//test4
console.log(arguments[0],"arguments[0]-test4");//输出事件默认参数
}
Vue2
不传参数时
<button @click="test1">test1</button>
<button @click="test2">test2</button>
<script>
test1() {
console.log(event,"test1");//获取到默认参数,必须是event
},
test2(e) {
console.log(e,"e-test2");//获取到默认参数
},
</script>
传参数时
<button @click="test3('test3')">test3</button>
<button @click="test4('test4',$event)">test4</button>
<button @click="(e)=>test5('test5',e)">test5</button>
<script>
test3(a,e) {
console.log(event,"event-test3");//获取到默认参数,显示已经弃用
console.log(a,"a-test3");//test3
console.log(e,"b-test3");//undefined
},
test4(a,b) {
console.log(a,"a-test4");//test4
console.log(b,"b-test4");//获取到默认参数
},
test5(a,b) {
console.log(a,"a-test5");//test5
console.log(b,"b-test5");//获取到默认参数
}
</script>