Event Flow 란 ?
브라우저 화면에 이벤트 발생!!! 브라우저는 가장 먼저 이벤트 대상을 찾기 시작한다.
이를 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다는 것을 알수 있다.
그리고 캡처링 버블링 이러한 과정에서 이벤트리스너가 차례대로 실행되는 것이 이벤트전파(Event propagation)라고 한다.
캡처링 ? 버블링 ?
요소.addEventListner(이벤트, 함수, 캡처 여부);
이벤트 리스너에 세 번째 매개변수로 이벤트를 캡쳐하는지 여부를 지정하며 기본값은 false (버블링)이다.
캡처링 (true)
- DOM의 부모노드에서 자식노드로 전달되는 것, 위에서 아래로 탐색하다가 캡처링 이벤트를 발견하면 몽땅 실행시킴
버블링 (false)
- DOM의 자식노드에서 부모노드로 전달되는 것, 캡처링 이벤트를 다 찾으면 타겟에서 윈도우로 다시 돔트리를 타고 올라감
이벤트 객체
이벤트가 일어나는 요소 그 자체를 의미한다
.addEventListener("click", function(e) 부분에서 e.target 이 바로 이벤트 객체를 나타낸다.
부모부터 자식까지 일련의 요소를 모두 타고가며 진행되는 이러한 이벤트의 특징 덕분에
이벤트 객체에는 target 또는 currentTarget 이라는 속성이 존재한다.!
👉 target 속성
내가 클릭한 요소, 이벤트가 발생한 지점, 이를 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다.
👉 currentTarget 속성
이벤트리스너가 연결된 요소, 또는 이벤트가 걸려있는 위치를 반환한다.
가리키는 값이 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(event.target); //button
console.log(event.currentTarget); // article
})
</script>이벤트 위임
이벤트의 흐름을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다는 것을 알수 있다.
이를 이용해서 이벤트 리스너가 없어도 마치 리스너가 있는 것 처럼 사용 할 수 있다.
여러개의 요소가 있을 때 각각의 요소에 이벤트를 일일히 지정할 필요 없이 부모 요소에 이벤트를 하나만 주어 코드의 재사용성을 높이고 메모리를 절약할 수 있다.
<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>
<script>
const parent = document.querySelector('.parent');
// 버튼 1,2,3을 클릭하면 버튼4로 바뀐다.
parent.addEventListener('click', function (event) {
console.log(event.target);
if (event.target.nodeName === "BUTTON") {
event.target.innerText = "버튼4";
}
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| | JavaScript | setTimeout() 후에, setInterval() 마다 (0) | 2022.06.06 |
|---|---|
| | JavaScript | 'DOM' preventDefault() 마우스 우클릭 제한, stopPropagation() 이벤트 전파 막기 (0) | 2022.05.18 |
| | JavaScript | 'DOM' 제어 명령어 (0) | 2022.05.17 |
| | JavaScript | 'DOM' 접근하기, HTMLCollection 와 NodeList (0) | 2022.05.16 |
| |JavaScript | 반복문 for...in , for...of (0) | 2022.05.10 |