자바스크립트의 Event 객체 내 이벤트 요소
Event 객체는 이벤트가 발생한 요소를 가져올 수도 있게 해줍니다. 이 요소는 target 속성에 담겨 있습니다.
이 요소가 this 안에 이미 있는데 왜 필요할까요?
사실 this는 항상 이벤트가 바인딩된 요소를 담고 있지만, target 속성은 실제로 클릭이 발생한 요소를 담고 있습니다.
이 실제 요소는 this와 일치할 수도 있고, 그렇지 않을 수도 있습니다.
예시를 살펴봅시다. div가 있고 그 안에 단락이 있다고 가정합시다:
<div id="elem">
<p>text</p>
</div>
div에 이벤트를 바인딩하지만, 단락을 클릭해 봅시다. 단락을 클릭하는 것은 단락이 우리의 div 안에 포함되어 있기 때문에 동시에 div를 클릭하는 것임이 명백합니다.
설명한 경우, target 속성은 이벤트가 발생한 최종 태그, 즉 div가 아닌 단락을 담게 될 것입니다. 이를 확인해 봅시다:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function(event) {
console.log(event.target); // 우리의 단락을 출력합니다
console.log(this); // 우리의 div를 출력합니다
});
li 태그들을 가진 ul 목록이 있다고 가정합시다:
ul {
padding: 30px;
border: 1px solid red;
}
li {
list-style-type: none;
margin-bottom: 20px;
border: 1px dashed black;
}
<ul id="elem">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
:
ul 태그에 클릭 핸들러를 바인딩하세요.
이 핸들러 안에서 tagName 속성을 사용해 클릭이 발생한 태그를 확인하세요.
클릭이 li 태그에서 발생한 경우 - 이 태그의 텍스트 끝에 느낌표를 추가하세요. 그리고 클릭이 ul 태그에서 발생한 경우 - 이에 대한 정보를 콘솔에 출력하세요.
