事件传参之后如何获取默认参数

307 阅读1分钟

自己个人总结,希望大家能在评论区做出补充

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>