[JavaScript30] Day 25

Event Capture, Propagation, Bubbling and Once

 

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value); 
}

divs.forEach(div => div.addEventListener('click', logText));

 

제일 가운데의 coral컬러 박스를 클릭하면 one. two. three가 모두 클릭되게 된다.

// console.log(this.classList.value)
console.log(this)

이렇게 this로 확인하면 태그 전체로 확인할 수 있다.

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
}

document.body.addEventListener('click', logText);

divs.forEach(div => div.addEventListener('click', logText));

body에 클래스 이름을 추가 한 후, 클릭 이벤트가 작동하도록한다.

동일하게 coral컬러 박스를 클릭하면 body라는 클래스명도 함께 출력된다.

이것은 이벤트의 버블링 때문에 나타나는 현상이다.

버블링은 아래에서 위로 진행된다.

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText, {
  capture: true
}));

이번에는 클릭했을 때, 이벤트에 capture를 true로 변경하게 되면,

캡처링이 일어나게 된다.

버블링과는 방대로 위에서 아래로 진행된다.

coral컬러 박스를 클릭하면 1 -> 2 -> 3번 박스가 차례대로 출력된다.

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
  e.stopPropagation() // stop bubbling!
}

divs.forEach(div => div.addEventListener('click', logText));

coral컬러 박스를 클릭하면 3번만 출력되게 된다.

stopPropagation을 사용함으로써 더이상 버블링이 일어나지 않게 된다.

 

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText));

이번에는 이와같은 상태에서 여러번 클릭을 해본다.

클릭 한 횟수만큼 계속 실행되는 것을 확인할 수 있다.

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText, {
  once: true
}));

once: true를 추가하면 여러번을 클릭해도 처음 한번만 실행되게된다.

아래의 결과를 여러번을 출력하였음에도 한번만 출력된 모습이다.

한번 더 버튼을 만들어서 테스트 해볼 수 있다.

const divs = document.querySelectorAll('div');
const btn = document.querySelector('button');

function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText, {
  once: true
}));

btn.addEventListener('click', () => {
  console.log('Click!!!');
});

버튼을 클릭하면 클릭한 횟수만큼 출력된다.

const divs = document.querySelectorAll('div');
const btn = document.querySelector('button');

function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText, {
  once: true
}));

btn.addEventListener('click', () => {
  console.log('Click!!!');
}, { once: true });

이제 once를 true로 했기 때문에 여러번 클릭해도 단 한번만 출력되는 것을 확인할 수 있다.

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)