JS 이벤트 처리 기능에서 이벤트 객체 및 기타 매개 변수를 동시에 전달

1. HTML 이벤트 핸들러

  초기 HTML 이벤트 핸들러에서는 여러 매개 변수를 직접 전달할 수 있습니다.

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

 참고 : 이벤트는 되돌릴 수 있지만 e가 아닌 이벤트 키워드 여야합니다. e 인 경우 오류가보고됩니다. ReferenceError : e가 정의되지 않았습니다.

 즉, HTML 이벤트 핸들러의 경우 올바른 접근 방식은 완전한 이벤트 이름을 전달하는 것입니다.

물론 매개 변수를 전달하지 않고 올바르게 인쇄 할 수도 있습니다 (이벤트 일 수 있음).

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

이벤트가 전달되지 않을 때 매개 변수를 전달할 수도 있습니다. 

 <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 이벤트 핸들러에서는 여러 개의 매개 변수를 직접 전달할 수 있고 이벤트를 전달하지 않고 직접 이벤트를 전달할 수 있으며, 이벤트 키워드에 매우 중요하므로 직접 사용할 수 있습니다.

2.  이벤트 키워드는 더 이상 "οnclick = function"및 addEventListener에서 값이 지정되지 않습니다. 모든 로고를 전달할 수 있지만 이벤트 만