안녕하세요! 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 | 오픈챌린지 5장 | ces | 2024.04.19 | 23 |
| 402 | 책을 종이책으로 구매했는데 1 | ddd | 2024.03.21 | 103 |
| 401 | 저기 황기태 저자님 1 | 방문자 | 2024.02.10 | 150 |
| 400 | 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 | 아인슈페너 | 2023.11.24 | 77 |
| 399 | 연습문제 3장 5번 문제 1 | seungjun | 2023.10.26 | 129 |
| 398 | 2장 오픈챌린 | cmc | 2023.09.17 | 148 |
| 397 |
웹서버소프트웨어
1
|
park | 2023.04.15 | 199 |
| 396 | Sublime Text, VS code IDE설명 update바랍니다 1 | 삼오칠 | 2023.04.15 | 93 |
| 395 | Atom은 IDE 리스트에서 삭제해주세요. 1 | 삼오칠 | 2023.04.15 | 84 |
| 394 |
예제 2-25 <video>태그로 비디오 삽입
2
|
코딩어렵다 | 2023.04.13 | 87 |
| 393 |
예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p)
2
|
코딩어렵다 | 2023.04.12 | 54 |
| 392 | 비정형 표 만들기 다운로드 1 | 애치 | 2023.04.04 | 103 |
| 391 |
오픈챌린지 5
|
ab | 2023.02.17 | 171 |
| 390 | 오픈챌린지 1 | ab | 2023.02.16 | 140 |
| 389 | form 태그 1 | 열공이 | 2023.01.31 | 88 |
| 388 |
예제 2-21 질문입니다.
1
|
열공이 | 2022.12.23 | 117 |
| 387 |
계산기 문제 변형 문의
|
Mikael | 2022.12.13 | 56 |
| 386 | 6장 이론문제 9번 지역,전역,블록변수 질문이요. | 문신 | 2022.12.10 | 60 |
| 385 | 2장 이론 문제 답 문의 | MIKAEL | 2022.12.09 | 241 |
| 384 | 2장 이론문제 4번 답 문의 | MIKAEL | 2022.12.09 | 84 |
교재의 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를 통해 이벤트가 발생한 객체가 어떤 것인지 분간할 수 있습니다.