안녕하세요! target프로퍼티에 관해서 질문이있습니다.
페이지 428쪽에서 답부분중 e.target.innerHTML이라는 부분이 있는데 target프로퍼티는 이벤트를 발생시킨 객체를 나타내는 것임을 알고있습니다.하지만 저는 e.innerHTML이 답인줄 알고 있었는데 왜 e.target.innerHTML이 답인지 잘 이해가 가질 않습니다 ㅠㅠ 이벤트객체의 역할이 뭔지도 이해가 가질 않습니다
2022.08.14 23:07
target프로퍼티 질문(페이지 428쪽)
조회 수 47 댓글 2
교재의 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를 통해 이벤트가 발생한 객체가 어떤 것인지 분간할 수 있습니다.