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 가 무얼 가리키고,
정해져있는 인자가 무엇무엇인지 에 대한게 안보이더라구요.
(물론 강의에서 설명해주신것으로 이해는 했습니다.)
혹시 어디서 볼수있을까요?
답변 1
1
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 속성(프로퍼티)값과 같습니다."
인스턴스에서 prototype 프로퍼티에 직접 접근해야하는 이유
0
59
1
setTimeout 에서 this
0
81
1
2강부터 영상이 나오지 않습니다.
0
175
1
자바스크립트 주석에 이상한 점이 있어서 문의드립니다.
0
221
2
return 문 안에 여러 함수가 존재하는 것이 이해되지 않습니다.
1
259
1
클래스 static 멤버
1
253
1
실행컨텍스트와 스택프레임
2
567
1
프로토타입으로 상속할때 브릿지 사용 이유
0
320
1
호이스팅 관련 질문
1
335
1
책 66p. 예제 3-2 질문입니다.
0
356
1
강의 내용 10:58 캡슐화 질문입니다.
1
399
1
강의 내용 5:10 질문입니다.
1
422
2
전역 공간에서의 this
0
426
2
18:31 addEventListener의 this
1
480
1
outerEnvironmentReference 질문
1
372
1
실행 컨텍스트와 클로저에 대해 질문드립니다.
1
448
1
Object.prototype.constructor의 [[prototype]] ?
1
658
1
함수를 값으로 할당할 때
2
457
1
15:54 'ddd' 사라지는 오류?
4
375
1
프로토타입 getPrototypeOf(instance).constructor(n,a) 질문입니다.
1
405
1
기본형/가변형 질문입니당
0
333
0
선생님 그러면 섹션 0만 봐도 무방한가요!?
0
337
1
Hoisting과 environmentRecord에 관한 질문입니다.
1
293
1
안녕하세요, 데이터 변경 질문입니다.
0
329
1