JavaScript e.target 이벤트 완전 정리

 

 

Web Development · JavaScript

JavaScript e.target 이벤트

이벤트 실제 대상, mouseover 설명 박스, visibility 토글, wheel 이미지 확대를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 DOM 조작과 이벤트 처리 연습을 모은 장입니다. 작은 예제가 많기 때문에 코드가 어느 요소를 찾고, 어떤 이벤트에서 어떤 스타일이나 값을 바꾸는지 구분하는 것이 핵심입니다.

window.onmouseover = function(e) { if (e.target.tagName.toLowerCase() != "span") return; e.target.style.textDecoration = "underline"; } let prev = null; window.onclick = function(e) { if (e.target.tagName.toLowerCase() != "li") return; e.target.style.fontSize = "1.3em"; if (prev != null) prev.style.fontSize = "1em"; prev = e.target; } function controlImageSize(e, img) { if (e.wheelDelta > 0) { img.width -= img.width * 0.05; } else { img.width += img.width * 0.05; } }

e.target이벤트가 실제 발생한 요소입니다.

tagName요소의 태그 이름입니다.

prev이전에 선택된 요소를 저장합니다.

addEventListener이벤트 리스너를 등록합니다.

visibility요소를 숨기거나 보이게 합니다.

wheelDelta마우스 휠 방향 값을 제공합니다.

---

1 e.target의 의미

e.target은 이벤트가 실제로 발생한 요소입니다. window에 이벤트를 걸어도, 사용자가 마우스를 올린 실제 span이나 클릭한 li를 target으로 확인할 수 있습니다.

이벤트 발생

→

e.target 확인

→

대상만 처리

---

2 span에만 밑줄

target 예제는 마우스가 올라간 요소의 tagName을 소문자로 바꾼 뒤 span인지 검사합니다. span이 아니면 return으로 종료합니다.

코드	의미	처리
e.target	실제 대상 요소	span 또는 다른 요소
tagName	태그 이름	SPAN처럼 대문자 가능
toLowerCase	소문자 변환	span 비교
return	함수 종료	span이 아니면 무시

---

3 li 클릭 확대

target2 예제는 li를 클릭하면 해당 항목만 1.3배로 키우고, 이전에 선택한 li는 다시 1em으로 되돌립니다. 이를 위해 이전 요소를 prev 변수에 저장합니다.

현재 target

fontSize를 1.3em으로 키웁니다.

prev

이전 선택 항목을 1em으로 되돌립니다.

---

 

반응형

 

4 mouseover 설명 박스

onmouseover/onmouseout 예제는 li에 이벤트 리스너를 붙이고, 마우스를 올리면 설명 div를 좌표 위치에 표시합니다.

1

init 실행commentDiv와 li 목록을 찾습니다.

2

리스너 등록각 li에 mouseover, mouseout을 연결합니다.

3

설명 선택li id에 따라 text 배열에서 설명을 고릅니다.

4

좌표 표시clientX/clientY 위치에 설명 div를 보여줍니다.

---

5 switch와 id 매핑

원본은 l0, l1, l2, l3 id를 switch 문으로 숫자 n에 연결합니다. 주석처럼 문자열에서 숫자를 뽑으면 더 짧게 만들 수도 있습니다.

id	n	설명 배열
l0	0	text[0]
l1	1	text[1]
l2	2	text[2]
l3	3	text[3]

---

6 visibility 토글

visibility 예제는 숨겨진 span 단어들을 버튼으로 보이게 하거나 다시 숨깁니다. getComputedStyle로 현재 계산된 visibility 값을 읽는 점이 중요합니다.

속성	의미	비교
visibility:hidden	안 보이지만 공간은 유지	display:none과 다름
visibility:visible	다시 보임	공간 변화 없음
getComputedStyle	실제 적용 스타일 읽기	CSS 파일 값 포함
style.visibility	인라인 스타일 변경	JS로 토글

---

7 onwheel 이미지 확대

onwheel 예제는 이미지 위에서 마우스 휠을 굴리면 width와 height를 5%씩 줄이거나 늘립니다. 원본은 wheelDelta가 양수이면 축소, 아니면 확대합니다.

휠 방향	조건	처리
위쪽	wheelDelta > 0	너비/높이 5% 감소
아래쪽	그 외	너비/높이 5% 증가
this	현재 img	크기 변경 대상
event	휠 이벤트	방향 확인

---

8 이벤트 등록 방식 비교

예제에는 HTML 속성 이벤트, window 이벤트 대입, addEventListener가 섞여 있습니다. 모두 동작하지만 실무에서는 addEventListener가 확장에 유리합니다.

onclick 속성

HTML 안에서 바로 연결되어 학습용으로 쉽습니다.

addEventListener

여러 리스너를 붙이기 쉽고 구조가 분리됩니다.

---

9 자주 하는 실수

실수	증상	해결
tagName 대소문자 무시	비교가 실패합니다.	toLowerCase를 사용합니다.
prev 저장 누락	여러 li가 계속 커집니다.	이전 요소를 저장해 되돌립니다.
commentDiv 위치 단위 누락	설명 박스가 이동하지 않습니다.	px를 붙입니다.
visibility와 display 혼동	공간이 남는 이유를 모릅니다.	visibility는 공간을 유지합니다.
wheelDelta만 과신	브라우저별 차이가 생깁니다.	deltaY도 함께 고려할 수 있습니다.

---

10 복습 체크리스트

체크	통과 기준
e.target	이벤트 실제 대상 요소를 설명합니다.
tagName	태그 이름 비교와 소문자 변환을 압니다.
prev	이전 선택 요소를 되돌리는 이유를 압니다.
mouseover	설명 박스를 좌표 위치에 띄우는 흐름을 설명합니다.
visibility	숨김/보임 토글과 공간 유지 특성을 압니다.
wheel	휠 방향에 따라 이미지 크기를 바꿀 수 있습니다.

---

11 디버깅 포인트

확인	콘솔 예시	의미
target	console.log(e.target)	실제 이벤트 대상을 봅니다.
tagName	console.log(e.target.tagName)	태그 이름 형식을 확인합니다.
좌표	console.log(e.clientX, e.clientY)	설명 div 위치 기준을 확인합니다.
visibility	console.log(v)	현재 표시 상태를 봅니다.
휠값	console.log(e.wheelDelta)	방향 값을 확인합니다.

---

12 테스트 케이스

케이스	동작	예상 결과
span hover	span에 마우스 올림	밑줄 표시
p hover	p에 마우스 올림	변화 없음
li 클릭	두 항목 순서대로 클릭	현재 항목만 확대
li hover	목록에 마우스 올림	설명 박스 표시
show/hide	버튼 반복 클릭	숨은 단어 토글
wheel	이미지 위 휠	크기 확대/축소

---

13 이벤트 위임 관점

target 예제는 window에 이벤트를 걸고 실제 대상이 span인지 li인지 검사합니다. 이런 방식은 부모나 상위 객체에서 이벤트를 받고 target으로 하위 요소를 구분하는 이벤트 위임의 기본 형태입니다.

방식	장점	주의
각 요소에 직접 등록	대상이 명확합니다.	요소가 많으면 등록 코드가 늘어납니다.
상위 요소에 등록	동적 요소에도 대응하기 쉽습니다.	target 필터가 필요합니다.
window에 등록	문서 전체를 관찰합니다.	불필요한 이벤트까지 받습니다.
addEventListener	여러 리스너를 둘 수 있습니다.	제거하려면 같은 함수 참조가 필요합니다.

1

상위에서 받기window나 ul에서 이벤트를 받습니다.

2

target 검사원하는 태그나 class인지 확인합니다.

3

대상만 처리조건에 맞지 않으면 return합니다.

4

상태 저장필요하면 prev처럼 이전 대상을 저장합니다.

---

14 브라우저 차이와 개선

마우스 휠이나 이벤트 객체 속성은 브라우저에 따라 차이가 있을 수 있습니다. 원본 예제는 학습용으로 단순하지만, 실제 코드에서는 표준 속성을 함께 고려합니다.

항목	원본	개선 방향
휠 방향	wheelDelta	deltaY도 고려
이벤트 연결	HTML 속성, window 대입	addEventListener로 통일
대상 검사	tagName 비교	matches("span") 활용 가능
설명 위치	clientX/clientY	스크롤 문서면 pageX/pageY 검토
크기 제한	제한 없음	최소/최대 width 설정

입문 단계에서는 원본 방식으로 이벤트 흐름을 이해하고, 이후 표준 속성과 addEventListener 방식으로 정리하면 됩니다.

연습	목표
ul에만 이벤트 등록	window 대신 목록 영역에서만 target을 검사합니다.
class로 필터링	tagName 대신 className이나 matches를 써 봅니다.
설명 박스 크기 변경	텍스트 길이에 맞춰 width와 height를 조정합니다.
이미지 최소 크기	wheel 축소가 너무 작아지지 않게 제한합니다.
숨김 방식 비교	visibility와 display none 차이를 직접 확인합니다.
이전 선택 표시	prev 항목에 배경색을 주고 되돌려 봅니다.
mouseout 확인	마우스가 빠질 때 설명 박스가 숨는지 봅니다.
좌표 보정	설명 박스가 커서에 가리지 않게 위치를 조정합니다.

마무리

핵심 기준이벤트가 어디에 붙었는지와 실제 target이 무엇인지 항상 나누어 확인합니다.

---

핵심 한 줄 요약

target이벤트 위임에서는 e.target으로 실제 대상을 구분합니다.

stateprev 같은 변수로 이전 상태를 관리합니다.

stylevisibility, fontSize, width/height를 이벤트 결과로 바꿉니다.

Tags

#JavaScript#e.target#mouseover#mouseout#visibility#onwheel#addEventListener#clientX#DOM#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, e.target, mouseover, mouseout, visibility, onwheel, addEventListener, clientX, DOM, 티스토리