2024. 5. 1. 10:24ㆍJavascript
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
브라우저에서 이벤트가 발생하면 해당 이벤트에 대한 정보를 담은 이벤트 객체(event)가 생성됩니다. 이 객체는 다양한 정보와 메서드를 제공하며, 이벤트 핸들러 내에서 이를 활용하여 작업을 수행할 수 있습니다.
이벤트 객체의 두 가지 주요 속성인 e.target과 e.currentTarget은 이벤트 관리와 처리에 있어서 다른 의미를 가지고 있으며, 정확히 이해하는 것이 중요합니다. 두 속성의 차이를 자세히 살펴보겠습니다.
e.target
e.target은 이벤트가 발생한 요소를 가리킵니다. 예를 들어, 사용자가 버튼을 클릭했다면 e.target은 해당 버튼 요소를 가리킵니다. 이를 통해 이벤트 핸들러 내에서 클릭된 요소에 대한 다양한 작업을 수행할 수 있습니다.
<html>
...
<body>
<button id="myButton">클릭하세요!</button>
</body>
</html>
<script>
document.getElementById('myButton').addEventListener('click', function(e) {
console.log('클릭된 요소:', e.target); // 클릭된 버튼 요소를 가리킵니다.
});
</script>
e.currentTarget
e.currentTarget은 현재 이벤트 핸들러가 연결된 요소를 가리킵니다. 이는 일반적으로 이벤트 핸들러를 등록한 요소와 동일합니다. 하지만 이벤트 버블링이 발생하는 경우에는 다를 수 있습니다. 이벤트 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 현상을 말합니다. 예를 들어, 하위 요소에서 이벤트가 발생하면 해당 이벤트는 상위 요소로 전파됩니다.
이때 이벤트 핸들러가 등록된 요소와 현재 이벤트가 발생한 요소가 다르면 e.currentTarget은 이벤트 핸들러가 등록된 요소를 가리키고, e.target은 실제 이벤트가 발생한 요소를 가리킵니다.
<html>
...
<div id="parent" data-id="parent">
<button id="child" data-id="child">클릭하세요!</button>
</div>
</html>
<script>
document.getElementById('parent').addEventListener('click', function(e) {
console.log('현재 이벤트 핸들러가 등록된 요소:', e.currentTarget.dataset.id); // div#parent를 가리킵니다.
console.log('이벤트가 발생한 요소:', e.target.dataset.id); // 클릭된 button#child 요소를 가리킵니다.
});
</script>
이벤트 위임에 관련된 내용이 자세히 알고 싶다면, 이전 포스트를 참고해 주세요.
[Javascript] JavaScript 이벤트 위임(Event Delegation): 효율적인 이벤트 핸들링 방법
이벤트 위임은 이벤트 핸들링을 효율적으로 관리하고 코드를 단순화하는 데에 도움을 줍니다. 이번 포스트 글에서는 이벤트 위임의 개념부터 활용 사례까지 자세히 살펴보겠습니다.이벤트 위..
dev-chim.tistory.com
e.target과 e.currentTarget은 이벤트 핸들링에서 핵심적인 역할을 수행합니다. 두 속성의 이해는 웹 개발자가 효율적인 이벤트 처리를 위해 반드시 숙지해야 할 부분입니다. 이를 통해 이벤트 관리와 디버깅이 더욱 쉬워지고 코드의 가독성과 유지 보수성을 향상할 수 있습니다.
이렇게 이벤트 객체에 대해서 알아보았습니다.
[Safari] 사파리 브라우저에서 모바일 모드로 보려면?
사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응
dev-chim.tistory.com
[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기
현대사회에서는 빠르게 변화하는 환경에서 새로운 아이디어를 신속하게 전달하는 것이 중요합니다. 이를 위해 AI 생성을 기반으로 하는 Gamma는 간편한 인터페이스를 제공하여 PPT, 문서, 웹사이
dev-chim.tistory.com
[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)
포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우
dev-chim.tistory.com
[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내
GitHub은 소프트웨어 개발에서 핵심적인 역할을 하는 플랫폼으로, 오픈 소스부터 기업용 프로젝트까지 다양한 협업 공간으로 자리 잡고 있습니다. 그중에서도 Pull Request(PR)는 프로젝트에 기여하
dev-chim.tistory.com
[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!
클로바노트는 음성인식, 자연어 처리 등의 AI 기술을 활용한 회의록 관리 서비스입니다. 이 서비스는 긴 문장과 비정형화된 대화를 인식하는 데 특화된 음성인식 엔진을 사용하며 참석자의 목소
dev-chim.tistory.com