안녕하세요! target프로퍼티에 관해서 질문이있습니다.
페이지 428쪽에서 답부분중 e.target.innerHTML이라는 부분이 있는데 target프로퍼티는 이벤트를 발생시킨 객체를 나타내는 것임을 알고있습니다.하지만 저는 e.innerHTML이 답인줄 알고 있었는데 왜 e.target.innerHTML이 답인지 잘 이해가 가질 않습니다 ㅠㅠ 이벤트객체의 역할이 뭔지도 이해가 가질 않습니다
2022.08.14 23:07
target프로퍼티 질문(페이지 428쪽)
조회 수 47 댓글 2
QnA
공부하면서 궁금했던 것을 질문해보세요.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18275 |
| 403 | 오픈챌린지 5장 | ces | 2024.04.19 | 16 |
| 402 | 스타일 시트 객체 2 | 한성이 | 2022.08.09 | 32 |
| 401 | css3의 프로퍼티와 7장 객체의 프로퍼티 1 | 한성이 | 2022.08.07 | 38 |
| 400 | 따옴표를 4중 5중으로 사용하는 방법에 대해 여쭙고 싶습니다. | 입문한 사람 | 2020.04.07 | 40 |
| 399 | border style 질문 2 | 궁그미 | 2020.07.28 | 41 |
| 398 | 76페이지 1 | ramoss | 2020.05.13 | 44 |
| » | target프로퍼티 질문(페이지 428쪽) 2 | 한성이 | 2022.08.14 | 47 |
| 396 | SRC와 SRDOC의 차이를 여쭙고 싶습니다. | 입문한 사람 | 2020.04.07 | 48 |
| 395 |
인터넷익스플로러 질문이요
1
|
021 | 2020.04.10 | 48 |
| 394 | p.254 3번문제 질문드립니다. 2 | 열심히 공부하는 독자 | 2020.08.14 | 48 |
| 393 | value 속성 1 | 열심히 공부하는 독자 | 2020.09.04 | 48 |
| 392 |
예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p)
2
|
코딩어렵다 | 2023.04.12 | 54 |
| 391 |
94p 그림2-4 질문
2
|
그냥초보 | 2020.04.15 | 55 |
| 390 |
계산기 문제 변형 문의
|
Mikael | 2022.12.13 | 56 |
| 389 | 윈도우 브라우저와 윈도우 탭 2 | tc0712 | 2021.11.22 | 57 |
| 388 | 4장 171쪽 2 | chu | 2022.04.04 | 57 |
| 387 | <script>태그의 위치 1 | 열심히 공부하는 독자 | 2020.08.15 | 58 |
| 386 | 브라우저 크기 변경 1 | 열심히 공부하는 독자 | 2020.08.27 | 59 |
| 385 | length 프로퍼티 2 | 열공이 | 2022.05.21 | 59 |
| 384 | [개정판] p.357 sibling 에 대한 설명 및 그림 8-7 1 | 질문 | 2022.09.02 | 59 |
교재의 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를 통해 이벤트가 발생한 객체가 어떤 것인지 분간할 수 있습니다.