안녕하세요! target프로퍼티에 관해서 질문이있습니다.
페이지 428쪽에서 답부분중 e.target.innerHTML이라는 부분이 있는데 target프로퍼티는 이벤트를 발생시킨 객체를 나타내는 것임을 알고있습니다.하지만 저는 e.innerHTML이 답인줄 알고 있었는데 왜 e.target.innerHTML이 답인지 잘 이해가 가질 않습니다 ㅠㅠ 이벤트객체의 역할이 뭔지도 이해가 가질 않습니다
2022.08.14 23:07
target프로퍼티 질문(페이지 428쪽)
조회 수 47 댓글 2
QnA
공부하면서 궁금했던 것을 질문해보세요.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18282 |
| 403 | 혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2 | 비만타쿠미 | 2018.09.26 | 116 |
| 402 | 한글html 1 | 키보드 향기 | 2020.03.29 | 922 |
| 401 | 한글 타이틀이 깨져 보입니다. 1 | 안스가리오 | 2020.01.06 | 116 |
| 400 | 표와 div span 4 | 키보드 향기 | 2020.04.05 | 109 |
| 399 | 페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1 | 정택희 | 2017.02.13 | 277 |
| 398 |
페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다.
1
|
워니고 | 2018.03.28 | 3878 |
| 397 | 테스트 | 관리자 | 2019.08.30 | 171 |
| 396 | 태그와 속성 2 | tc0712 | 2021.09.08 | 72 |
| 395 | 크롬 오디오 자동재생 관련 질문입니다! 1 | ^_^ | 2018.09.30 | 449 |
| 394 |
코드 잘못된 부분을 봐주시면 정말 감사하겠습니다
1
|
입문한 사람 | 2020.04.01 | 607 |
| 393 | 캔버스 관련 질문 1 | 원그리기 | 2021.08.22 | 101 |
| 392 | 챕터2 연습문제 8번 | 김석현 | 2018.04.22 | 156 |
| 391 | 챕터 3의 10번 문제 1 | 컴공과 입문 | 2018.03.20 | 125 |
| 390 | 책을 종이책으로 구매했는데 1 | ddd | 2024.03.21 | 103 |
| 389 | 책을 마치며 7 | 은성 | 2017.04.13 | 492 |
| 388 | 책 151p 3장 오픈챌린지 문제질문입니다. 3 | 이상민 | 2019.07.19 | 239 |
| 387 | 짝수번 정답 3 | idididid | 2017.12.24 | 3136 |
| 386 | 질문입니다 1 | 1213 | 2018.03.06 | 420 |
| 385 | 질문드립니다. 1 | ㅇㅇ | 2020.06.03 | 306 |
| 384 | 질문 있습니다. 2 | 흠 | 2021.08.19 | 134 |
교재의 395페이지~405까지 천천히 다시 읽어보세요.
이벤트 객체는 현재 발생한 이벤트에 관한 여러 정보들을 담고 있는 객체입니다.
이벤트가 발생할 때 자동 생성되어 DOM 트리를 따라 목적 객체까지 흘러갑니다.
목적 객체에 다다르기 전에도 DOM 트리 중의 한 DOM 객체에 사용자가 달아 놓은 이벤트 리스너가 있으면 이벤트 리스너에게 전달됩니다.
이벤트 리스너는 사용자가 작성한 프로그램이므로, 사용자는 이벤트 리스너를 통해 현재 발생한 이벤트 객체를 전달받고
어떤 이벤트가 발생하였는지 알 수 있습니다.
만일 이벤트 객체가 e라면 현재 이벤트를 유발한 DOM 객체가 어떤 것인지는 e.target이 가리킵니다. 그래서 e.target.innerHTML이 정답입니다.
이런 기초 상황에 대해서 알고 있을 텐데, 질문자께서 이런 질문을 하는 것이
어떤 혼란 때문인지 약간 예측해 보고 다음과 같이 설명을 이어가 보겠습니다.
다음은 버튼이 3개 있는데, 이벤트 리스너는 1 개 작성하고 각 버튼에 모두 동일한 이벤트 리스너 함수를 달아 놓았습니다.
<button id="1" onclick="f(event)")
<button id="2" onclick="f(event)")
<button id="3" onclick="f(event)")
function f(e) {
// 이 이벤트 리스너 함수는 3개의 버튼 중 아무것이나 클릭되어도 실행됩니다.
// 그러면 어떤 버튼이 눌러졌는지 어떻게 알 수 있을 까요?
if(e.target == document.getElementById("1") ) {
... // 1번 버튼 클릭된 경우
}
else if(e.target == document.getElementById("2") ) {
... // 2번 버튼 클릭된 경우
}
else if(e.target == document.getElementById("3") ) {
... // 3번 버튼 클릭된 경우
}
}
앞의 소스에서 보듯이 e.target를 통해 이벤트가 발생한 객체가 어떤 것인지 분간할 수 있습니다.