[JavaScript] 이벤트버블링/ dataset

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/

 

 

이벤트 버블링

이벤트 버블링이란 이벤트가 상위요소로 퍼지는 현상이다.

즉, div1-div2-p태그 가 있다고 가정한다면 p태그 하나를 클릭했다 하더라도 컴퓨터는 그 상위요소인 div1,div2를 다 클릭했다고 인식하는 것이다.

이걸 알아두어야 하는 이유는 이로인해 버그가 생길 수도 있기 때문이다.

 

버블링으로 버그가 생겼을 때는 if문이나 e.target 등으로 대처할 수 있다.

예시를 먼저 보자.

$('.background').click(function(event){
    if ( event.target == event.currentTarget ) {
        $('.background').hide();
    };
})

파라미터에 event라고 작명했고 그로인해 event.target을 쓴 것. 통상적으로 e 하나만을 쓰기도 한다.

 

• e.target: 지금 클릭한 요소
• e.currentTarget: 지금 이벤트리스너(click)가 달린 곳 (=.background)
• e.preventDefault: 기본동작 막기

이 위의 세가지는 모두 자바스크립트 문법이다.

그렇기 때문에 자바스크립트 문법을 쓰고 제이쿼리 문법으로 비교하면 작동이 안 된다.

if ( event.target == $(.background) ) {}

즉, 위의 코드는 작동되지 않는다. (난 처음에 이렇게 했다😋)

 

---

버블링을 이용해 탭기능 만들기

버블링을 잘만 이용하면 이벤트리스너를 적게 사용할 수 있다.

(이벤트리스너 사용을 줄이면 반복문 안 쓸 수도 있고 그래서 코드양도 줄음)

그렇다면 여러 개의 버튼을 감싸고 있는 태그에 이벤트리스너를 준 뒤 e.target 등을 사용하면 되겠다.

$('').click(function(e){
    if (e.target == document.querySelectorAll('.button')[0]) {
    tapOpen(0);
    }
})

e.target은 자바스크립트 문법이라고 했으니 비교 대상도 자바스크립트 문법으로 써준다.

querySelector(): 제이쿼리의 $
querySelectorAll()[n번째]: 똑같은 이름의 요소가 많을 때 사용하면 됨

 

근데 막상 코드를 짜보면 어차피 버튼 수대로 if문을 짜야하기 때문에... 😅

그래서 더 쉽고 깔끔하게 할 수 있는 방법이 있다!.!

바로 dataset 문법을 사용하는 것이다.

 

---

dataset 문법

html에 몰래 정보를 심는 문법이라고 한다.

<div data-hiding="0">숨겨보자</div>

이런 식으로 data-원하는 대로 작명="값" 을 넣어주면 된다. 이게 0이라는 값을 숨겨둔 것이다.

정보를 꺼내려면 자바스크립트로 그 요소를 찾아 마지막에 .dataset.작명을 붙이면 된다!

 

이 문법을 사용하면 if문을 쓰지 않고도 탭기능을 구현할 수 있다.

$('').click(function(e){ 
  tapOpen(e.target.dataset.hiding)
});

자바스크립트 문법으로 html요소를 찾고 (=e.target) 그 뒤에 dataset.hiding을 쓰면

클릭한 그 요소에 숨겨져있던 정보를 갖고 오게 된다. (파라미터까지 쓰는 걸 잊지 말자.)

 

그리고 제이쿼리로도 데이터를 저장할 수 있는데 제이쿼리가 더 호환성이 좋다고 한다.

$('').data('작명', '값'); //심자
$('').data('작명'); //꺼내자

제이쿼리로 몰래 정보를 저장하는 방법과 꺼내 쓰는 방법

 

근데 위의 자바스크립트 방법과는 저장방식이 조금 다르다고 한다.

어떤 식으로 다른지 구체적으로 설명해주시진 않았다.

그래서 구글링하고 내 머리에 이해가 되는 포스팅을 찾는다면 링크를 걸어두어야 겠다.!