이벤트 함수에서 임의의 인자 e의 역할에 대해 궁금증이 생겨서 문의드립니다!

Question

안녕하세요 선생님 :) 바쁘실텐데 죄송합니다. function   mouseFunc ( e ) {      console . log ( e . clientX ,   e . clientY ); } 이 부분에 인자 e의 역할은 이벤트를 감지하기 위한 인자인 것으로 이해하고 있습니다. 이 부분이 맞을까요?😊 실습하다보니, e를 넣으면 정상 작동이 되나. e를 인자로 넣지 않으면 오류가 뜨는 이유는 무엇인지 궁금해서.. 굳이 임의의 인자를 넣어 이벤트를 감지 시켜야 하는 자바스크립트의 생태계에 대해 좀 더 스터디 해보려고 하는데  뭐라고 검색해야 자료를 찾고 스터디 할 수 있을까요?

코딩일레븐 · Answer

질문 주신 함수내에서 e.clientX 를 사용하지 않으면 e 가 없어도 에러가 나지 않습니다. 없는 e를 찾아서 에러가 난겁니다. 예를 들어 아래처럼 클릭 체크 용도라면 e 가 없어도 됩니다. const button = document.querySelector("button"); button.addEventListener("click", function(){ alert("클릭") }); 테스트 해보세요. const button = document.querySelector("button"); button.addEventListener("click", mouseEvent ); button.addEventListener("mouseover", mouseEvent ); button.addEventListener("mouseout", mouseEvent ); function mouseEvent (e){     console.log(e.type) } console.log(e) 를 찍어서 보시면 공부가 많이 되실겁니다. 위 처럼 하나의 함수에 type으로 분기처리해서 각각 처리하기도 합니다.