[JavaScript]이벤트 버블링

Event bubbling

 

이벤트 버블링은 이벤트가 가장 안쪽의 대상 요소에서 먼저 트리거된 다음 가장 바깥쪽 DOM 요소 또는 문서 개체에 도달할 때까지 동일한 중첩 계층에서 대상 요소의 상위 요소에서 연속적으로 트리거되는 DOM 이벤트 전파 유형 

/출처: 위키피디아

 

어떤 HTML 태그에 이벤트가 발생하면  그의 모든 상위요소까지

이벤트가 실행되는 현상

/출처:코딩애플

 

예를 들어

<div>
  <div>
    <span>이벤트버블링 예제</span>
  </div>
</div>

위의 코드에서 span태그의 요소를 클릭하면 브라우저는 사용자가 클릭을 총 3번 했다고 인지함.

이유는 이벤트 버블링때문에 <div><div><span>이렇게!! 세개를 인식한다.

*이벤트 버블링은 항상 일어나는 현상*

---

해결방법!

document.querySelector('.클래스명').addEventListener('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

 

e.target 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)

e.currentTarget 지금 이벤트리스너가 달린 곳 알려줌 ( this라고 써도 같은결과)

e.preventDefault() 이벤트 기본 동작을 막아줌

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

---

document.querySelector('.클래스명').addEventListener('click', function(e){
  if ( e.target == document.querySelector('.클래스명') ) {
    document.querySelector('.클래스명').classList.remove('다른요소');
  }
})

이런식으로도 사용가능하다.

근데!!!!

 

== 이렇게 등호를 사용하려면 Jquery 셀렉터끼리 사용하면 안된다.

$('.클래스명').is($('.클래스명'))

이런 비교용 함수를 사용해야한다.

---

이벤트 버블링은 항상 일어나지만 막아야하는 현상은 아니다!! 꼭 필요한 경우에만 중단해야함.

 

이벤트 버블링 덕분에!! 이벤트 리스너를 적게 사용해서 RAM사용량을 줄일 수 있는 이점이 있다.

(이벤트 리스너를 사용할 수록 RAM사용량이 늘기때문에 적을 수록 좋다.)

---

이때 알아두면 좋은 것은 dataset 문법!

(하지만 IE 11+에서 작동하기 때문에 jQuery 함수가 나을 수도 있음)

 

dataset 을 왜 알아두면 좋을까??

바로... 짧게 쓸 수 있으니께..(머리아픈 if문을 안 써도 될 수 있다)

---

HTML에서 클릭하는 요소들에 data- id를 준다.

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

---

<li class="tab-button" data-id="0">예제요</li> 
<li class="tab-button orange" data-id="1">예제이요</li> 
<li class="tab-button" data-id="2">예제삼요</li>

---

 아래 문법으로 데이터 값을 확인할 수 있음.

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

---

이런식으로 응용!

$('.list').click(function(){
  탭열기(지금누른버튼에 숨어있던 data-id)
});

$('.list').click(function(e){
  탭열기(e.target.dataset.id)
});

Jquery 함수로는 

$(셀렉터).data('데이터이름', '값') -> 저장

$(셀렉터).data('데이터이름') -> 출력

---

https://api.jquery.com/data/

.data() | jQuery API Documentation

---

관련 포스트 꼮 읽어보기!!

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

---

코딩애플 강의를 듣고 작성하는 글입니다.