이벤트 흐름
- 브라우저 화면에서 이벤트가 발생하면 브라우저는 가장 먼저 이벤트 대상을 찾기 시작.
- 이벤트 대상을 찾아가는 단계
- 캡처링 단계: 이벤트가 최상위 요소(document)에서 시작하여 이벤트가 발생한 요소까지 내려가는 단계
- 버블링 단계: 이벤트가 발생한 요소에서 시작하여 최상위 요소(document) 방향으로 이동하는 단계
- 이벤트 전파: 이벤트가 발생한 요소에서 시작하여 캡처링 단계에서 버블링 단계까지 이벤트가 전파되는 과정
이벤트 target, currentTarget
- target : 이벤트가 실제로 발생한 요소
- currentTarget : 이벤트가 현재 처리 중인 요소
이벤트 위임
- 이벤트 리스너가 없어도 마치 리스너가 있는것처럼 사용할 수 있음
<!DOCTYPE html> <html lang="ko"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<style>
</style>
</head><body>
<article class="parent">
<ol>
<li><button class="btn-first" type="button">버튼1</button></li>
<li><button type="button">버튼2</button></li>
<li><button type="button">버튼3</button></li>
</ol>
</article><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.parent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//.parent 클래스를 가진 요소를 찾아 parent 변수에 할당</span> parent<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//parent 요소에 클릭 이벤트 리스너를 추가</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//클릭된 요소를 콘솔에 출력. 여기서 event.target은 실제로 클릭된 요소</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">===</span> <span class="token string">"BUTTON"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//클릭된 요소가 버튼인지 확인 (nodeName은 요소의 태그 이름을 반환)</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"버튼4"</span><span class="token punctuation">;</span> <span class="token comment">//버튼의 텍스트를 "버튼4"로 변경</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></body>
</html>
이벤트의 this
- 이벤트 리스너 함수 내부의 this 는 이벤트가 연결된 노드를 참조.
<article class="parent"> <ol> <li><button class="btn-first" type="button">버튼1</button></li> <li><button type="button">버튼2</button></li> <li><button type="button">버튼3</button></li> </ol> </article><script>
const parent = document.querySelector('.parent');
parent.addEventListener('click', function (event) {
console.log(this);
});<span class="token keyword">const</span> myObj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'jaehyun'</span><span class="token punctuation">,</span> <span class="token function">walk</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> parent<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' is walking'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
</script>
이벤트 흐름 조작
preventDefault()
- 브라우저의 기본 이벤트 동작을 취소
<!-- 앵커의 기본 동작을 중지 --> <a href="https://www.naver.com" class="link">네이버 링크입니다만..</a> <script> const link = document.querySelector('.link'); link.addEventListener('click', (event) => { console.log('clicked'); event.preventDefault(); }) </script><!-- submit 의 기본 동작을 중지 -->
<form action="">
<button type="submit" class="submit">제출</button>
</form>
<script>
const submit = document.querySelector('.submit');
submit.addEventListener('click', (event) => {
console.log('clicked');
event.preventDefault();
})
</script>
stopPropagation()
- 이벤트 전파를 막음
<form action=""> <button type="submit" class="submit">제출</button> </form><script>
const submit = document.querySelector('.submit');
submit.addEventListener('click', (event) => {
console.log('clicked');
event.preventDefault();
// event.stopPropagation();
});document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'event still alive!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></script>
꾸준한 열정으로 나아가는 프론트엔드 개발자