js事件处理函数传值

js事件处理函数传值

https://blog.csdn.net/a1059526327/article/details/106392305/

1. HTML事件处理程序

在最早的HTML事件处理程序中我们可以直接传入多个参数:

<div id="btn" onclick="clickBtn(event,2)">任务总数</div>
<script>
    function clickBtn(event,val){
        console.log(event);
        console.log(val)
    }
</script>

注意：event可以调换前后顺序但必须是event关键字，不能是e ，如果是e就会报错：ReferenceError: e is not defined 即在HTML事件处理程序的情况下正确的做法是传入完整的event名称

当然也可以不传递任何参数，也可以正确打印（也只能是event）

<div id="btn" onclick="clickBtn()">任务总数</div>
    <script>
        function clickBtn(){
            console.log(event);
        }
 </script> 

不传递event的时候也可以传参

 <div id="btn" onclick="clickBtn(2)">任务总数</div>
    <script>
        function clickBtn(a){
            console.log(event);
            console.log(a)
 }

2. "οnclick=function"以及addEventListener

<div id="btn">任务总数</div>
    <script>
        var btn=document.getElementById('btn')
        btn.onclick = function(e){
            console.log(e);
        }
</script> 
 
//addEventListener
 
<div id="btn">任务总数</div>
    <script> 
        var btn=document.getElementById('btn')
        btn.addEventListener('click',function(e){
            console.log(e);
        })
</script> 

注意：以上两种可以传入e等其它标识了但是不可以不传参

但是在这两种事件处理程序中默认只传入event参数，如果想传入其它参数，可以采用将方法进行封装来处理：

   <div id="btn">任务总数</div>
    <script> 
        var btn=document.getElementById('btn')
        btn.onclick=function(e){
            test(e,'aa')
        }
        function test(e,str){
            console.log(e.target)
            console.log(str)        
    }
    </script> 
 
//addEventListener
 
 <div id="btn">任务总数</div>
    <script> 
        var btn=document.getElementById('btn')
        btn.addEventListener('click',function(e){
            test(e,'aa')
        })
        function test(e,str){
            console.log(e.target)
            console.log(str)        
    }
    </script> 

总结：

1. 在最早的HTML事件处理程序中我们可以直接传入多个参数，并且可以不传入event直接传参，它是非常看重event关键词的，所以可以直接使用。

2. 在"οnclick=function"以及addEventListener中不再看重event关键词，可以传任意标识，但只能传event