이벤트리스너에 파라미터가 있는 함수 연결하기

이런 궁금증이 있었다.

같은 작업을 반복할 거라 함수를 만들어서 이벤트리스너 2번째 파라미터에 넣고 싶은데 그럼 이 함수의 매개변수는 어떻게 넣지?

arrow function 사용을 권장하는 추세라고 하던데 얘는 anonymous function이니까 같은 작업을 반복하려면 이름이 있는 함수를 만들어야 하나?

전통적인 anonymous function도 지금도 필요할 때는 쓰겠지? arrow function이 anonymous function를 대체하는 건 아니겠지..?

결국 MDN 웹사이트 addEventListener() 페이지에서 다음과 같은 해결 방법을 찾았다. 이게 가장 적합한 방법인지는 모르겠지만 지금 내가 찾은 유일한 해결방법이다.

위 글을 참고해서 내가 원하는 기능을 구현했다.
: 클릭 이벤트가 일어날 때 changeColor() 함수 실행하기. 이때, 클릭한 항목을 changeColor() 파라미터로 넣어주기.

const skills = document.querySelector(".menu-item-skills a");
const tools = document.querySelector(".menu-item-tools a");

const ACTIVE_CLASSNAME = "active";

function changeColor(clickedMenu) {
  //현재 active인 클래스에서 active 제거
  const activeItem = document.querySelector(".active");
  activeItem.classList.remove(ACTIVE_CLASSNAME);

  //클릭한 항목 클래스에 active 추가
  clickedMenu.classList.add(ACTIVE_CLASSNAME);
}

skills.addEventListener("click", function() {changeColor(skills)});
tools.addEventListener("click", function() {changeColor(tools)});