안녕하세요! target프로퍼티에 관해서 질문이있습니다.
페이지 428쪽에서 답부분중 e.target.innerHTML이라는 부분이 있는데 target프로퍼티는 이벤트를 발생시킨 객체를 나타내는 것임을 알고있습니다.하지만 저는 e.innerHTML이 답인줄 알고 있었는데 왜 e.target.innerHTML이 답인지 잘 이해가 가질 않습니다 ㅠㅠ 이벤트객체의 역할이 뭔지도 이해가 가질 않습니다
2022.08.14 23:07
target프로퍼티 질문(페이지 428쪽)
조회 수 47 댓글 2
QnA
공부하면서 궁금했던 것을 질문해보세요.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18312 |
| 382 | 2장 예제 2-11과 관련하여 질문 드립니다. 1 | 조근석 | 2017.04.30 | 398 |
| 381 | 7장에 연습문제에 있는 실습문제 질문 1 | student | 2017.05.07 | 1261 |
| 380 | 8장 연습문제 실습문제 4장 2 | student | 2017.05.08 | 2873 |
| 379 | 실습문제 7장에 8번 질문 1 | abcd | 2017.05.09 | 994 |
| 378 | 오랜만에 찾아 뵙습니다.. 3 | 은성 | 2017.05.10 | 338 |
| 377 | 9장 오픈챌린지 답이 너무 궁금합니다. 1 | 범이 | 2017.05.10 | 1253 |
| 376 | 8장의 10번 문제 질문 있습니다. | 웸프로그래밍 | 2017.05.28 | 625 |
| 375 | 9장 2번 질문있습니다. | 웹프로그래밍 | 2017.05.28 | 1136 |
| 374 | 9장 4번 질문있습니다. | 웹프로그래밍 | 2017.05.28 | 551 |
| 373 |
4장 8번 문제 질문드려요!
1
|
safd | 2017.06.09 | 683 |
| 372 | 07장 10번 답좀 알고싶습니다... 2 | abcd | 2017.06.11 | 1088 |
| 371 | 안녕하세요 처음하는 사람입니다 교재 구입하였습니다 2 | 성현군 | 2017.06.29 | 330 |
| 370 | 7장 10번문제 1 | 학섕 | 2017.07.12 | 1868 |
| 369 | 연습문제 8장 이론문제 2번 답을 알고 싶습니다. 1 | khe | 2017.08.18 | 818 |
| 368 | 예제에 필요한 그림이나 동영상 같은 자료파일은? 1 | donghee | 2017.09.15 | 130 |
| 367 | 6장 실습문제 짝수 답좀 알려주실분? 제발요 | 도움 | 2017.09.18 | 1105 |
| 366 | 예제에 나오는 이미지와 동영상파일은 어디서 다운받을 수 있나요... 1 | gofkdvjvl | 2017.09.21 | 215 |
| 365 | 실습문제 홀수번 정답 | ㅁㅁ | 2017.09.24 | 635 |
| 364 | 예제 5-11을 하다 사소한 궁금한 것이 생겼습니다 1 | 수소방울 | 2017.10.13 | 167 |
교재의 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를 통해 이벤트가 발생한 객체가 어떤 것인지 분간할 수 있습니다.