JS | .addEventListener에 파라미터 전달하기

💡 스터디를 하는 도중 이미 만든 함수를 이벤트리스너에 담을 때 파라미터를 어떻게 사용해야하나(매개변수를 두 개 전달할 순 없을까?) 하는 고민에 빠지게 됨

function btnControl(a, b) {
	document.quertySelector('#alert').style.display = a
	document.quertySelector('#contents').innterText = b
};

const btn = document.querySelector('#btn')
btn.addEventListener('click', btnControl('none','2') // 사용불가

👉🏻 파라미터가 없는 경우에는 btn.addEventListener('click', btnControl) 의 형태로 이벤트리스너를 등록하면 되지만 만약 파라미터가 여러개라면 어떻게 써야 하는 것일까 하는 의문 지옥에 .. function(a,b){}의 형태로 작성하기엔 굳이 있는 함수를 한 번 더? 근본적으로 함수의 의도에서 벗어난 것 같음

EventTarget.addEventListener()

• 기본 구조

EventTarget.addEventListener('eventType', functionName)
// functionName = 이벤트핸들러

• 이벤트 수신기 콜백
  - addEventListener()에 지정하는 이벤트 수신기는 콜백 함수거나, 콜백으로 작동할 handleEvent() 메서드를 포함하는 객체
  

• 파라미터를 받아 작동시키기
  - 방법1)

  function btnControl(a, b) {
  
  };
  
  const btn = document.querySelector('#btn')
  btn.addEventListener('click', function(a,b){
      document.quertySelector('#alert').style.display = a;
      document.quertySelector('#contents').innterText = b;	
  })

  - 방법2)

  function btnControl(a, b) {
  
  };
  
  const btn = document.querySelector('#btn')
  btn.addEventListener('click', ()=>{btnControl('block','okay')})