JavaScript(for 반복문, 이벤트 버블링, dataset)

■ 반복문

for 반복문

for (초기화 구문; 조건식; 증감식) {
  // 반복적으로 실행할 코드
}

for (var i = 0; i < 5; i++) {
  console.log(i);
}

for 반복문은 반복적인 작업을 수행하기 위해 사용됩니다.

1. 초기화 구문: 반복문이 시작되기 전에 한 번만 실행되는 구문입니다.

주로 반복 변수의 초기값을 설정하는 데 사용됩니다. 예를 들어, var i = 0은 변수 i를 0으로 초기화합니다. 

 

2. 조건식: 반복문이 실행되는 조건을 나타내는 부분입니다.

조건식이 true로 평가되면 반복문의 코드 블록이 실행됩니다. 조건식이 false로 평가되면 반복문이 종료됩니다. 

 

3. 증감식: 반복문의 각 반복이 끝날 때마다 실행되는 구문입니다.

주로 반복 변수를 업데이트하거나 변경하는 데 사용됩니다. 예를 들어, i++은 변수 i를 1씩 증가시킵니다.

 

 

■ 이벤트 버블링

이벤트 버블링이란?

<div>
  <div>
    <p>안녕</p>
  </div>
</div>

임의의 HTML 태그에서 이벤트가 발생했을 때, 그 상위 요소까지 이벤트가 발생하는 현상을 이벤트 버블링이라고 합니다.

예를 들어 <p 태그>를 클맀했을 때, 상위의 <div 태그> 들까지도 클릭 이벤트가 발생하게 됩니다.

 

 

이벤트리스너에서 쓰이는 함수들

$('.example')('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

e.target은 실제로 클릭한 요소를 알려줍니다. (이벤트 발생한 곳)

 e.currentTarget은 지금 이벤트리스너가 달린 곳을 알려줍니다. (참고로 this라고 써도 똑같음) 

e.preventDefault() 실행하면 이벤트 기본 동작을 막아줍니다. (form의 submit 등을 막아줌) 

e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줍니다.

 

 

■ dataset 문법

dataset

<div data-데이터이름="값"></div>

dataset을 사용하면 html 안에 유저 몰래 데이터를 숨겨놓을 수 있습니다.

 

document.querySelector().dataset.데이터이름;

그리고 셀렉터.dataset.데이터이름 을 사용하면 숨겼던 데이터의 값을 출력합니다.