addEventListener 콜백함수의 인자 확인법??

해결됨
블루윤 프로필

    <div class="ttt1"></div>

    <script>

        const test = document.querySelector(".ttt1");

        function testFunc(x, y, z) {

            console.log(this, x, y, z);

        }

        test.addEventListener("click", testFunc);  

    </script>

MDN 보니까 

콜백함수 내에서 this 가 무얼 가리키고,

정해져있는 인자가 무엇무엇인지 에 대한게 안보이더라구요.

(물론 강의에서 설명해주신것으로 이해는 했습니다.)

혹시 어디서 볼수있을까요?

정재남 프로필
정재남 4달 전

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

위 첫번째 링크(영어)에는 hashtag(The event listener callback)가 걸려있어 바로 확인 가능한 반면,
두번째 링크(한국어)에는 hashtag가 빠져있어서 위치 찾기가 쉽진 않네요.
어쨌든 한국어 버전에서는 '이벤트 리스너 콜백' 파트에서 첫번째 인자로 event객체를 받는다는 것이 명시되어 있습니다.

"즉, 콜백은 단일 매개 변수를 허용합니다: 발생한 이벤트를 설명하는 Event에 기반한 객체이며, 아무것도 반환하지 않습니다."

또한 this에 관해서는, 같은 페이지에서
'The value of this within the handler' (영어)
'핸들러 내부의 this 값' (한국어)
파트를 살펴보시면 됩니다.

"addEventListener() 를 사용하여 핸들러 함수를 요소에 연결하면, 핸들러 내부의 this 값은 요소에 대한 참조입니다. 이것은 핸들러에 전달 된 이벤트 인수(아규먼트)의 currentTarget 속성(프로퍼티)값과 같습니다."

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스