NULL
JS 이벤트 버블링 본문
이벤트 버블링
어떤 html태그에 이벤트가 발생하면
그 html의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.
click이라는 이벤트를 예로 들자면,
html 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭이 된다는 뜻이다.
<div>
<div>
<p>hello</p>
</div>
</div>
위의 코드를 보면 p태그의 hello라는 글자를 클릭하게 되면
브라우저는 사용자가 클릭을 총 3번 했다고 인지한다.
예 ) p위에 div와 그 위의 div
위와 같은 현상이 이벤트 버블링이다.
브라우저는 원래 이렇게 동작하도록 되어있으며
이 사실을 잊은 채 코드를 짜다보면 가끔 이상한 현상이 발생할 수 있다.
<div class="black-bg"> (← 해당 창을 누르면 모달창 닫으라는 코드를 짬)
<div class="white-bg">
모달창 내용
</div>
</div>
사용자가 <div class="white-bg"> 이거 클릭해도
이벤트 버블링 때문에 <div class="black-bg"> 이것도 클릭한 것이 된다.
그래서 거기 붙어있던 이벤트리스너가 동작해서 모달창을 닫아주게 되는데
이러한 문제를 해결하기 위해 자주 사용하는 이벤트 관련 함수/메소드가 존재한다.
이벤트리스너 안에서 쓰는 이벤트 함수들
document.querySelector('.black-bg').addEventListener('click', function(e){
e.target;
e.currentTarget;
e.preventDefault();
e.stopPropagation();
})
이벤트리스너 콜백함수에 파라미터에 아무거나 추가해도 되지만
주로 event의 약자인 e를 추가하는 편이다.
이로써 이벤트관련 유용한 함수들을 사용할 수 있게 된다.
각 메소드의 역할 ★★★★★
1. e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
2. e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
3. e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
4. e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
이외에 여러가지가 존재하며 필요할때마다 검색해서 쓰면 된다.
이중에서 가장 중요한건 e.target이다.
이벤트 버블링이 일어난다면
사용자가 실제로 클릭한 요소를 e.target으로 찾아 낼 수 있다.
const bg = document.querySelector(".black-bg");
bg.addEventListener("click", function(e){
if(e.target == bg){
bg.style.display = "none";
}
})
여기서 조건식에 e.currentTarget 출력해보면
e.currentTarget은 해당 이벤트리스너를 가리킨다.
즉 bg(검은 배경)을 가리키게 되서 조건이 true가 된다.
this도 마찬가지이다.
따라서
e.target == e.currentTarget 혹은
e.target == this 이렇게 써도 된다.
제이쿼리에서 사용하기
jQuery 셀렉터로 찾은 결과와
querySelector 셀렉터로 찾은 결과는 다르게 생겼다.
출력해보면 전자는 이상한 object 이런게 나오고 후자는 <html> 이런게 나온다.
그래서 e.target == $('.black-bg') 이건 사용불가능하며
그리고 애초에 jQuery 셀렉터끼리 등호비교는 불가능하다.
제이쿼리에서는
$('.black-bg').is($('.black-bg')) 와 같은 비교용 함수를 사용하면 된다.
위 코드에서는 $(e.target).is($('.black-bg')) 를 사용하면 된다.
'Front-end > Vanilla JS' 카테고리의 다른 글
| array와 Object 개념정리 (0) | 2022.07.13 |
|---|---|
| js, jquery 퍼센트 스크롤 (0) | 2022.05.01 |
| 스크롤(scroll) 이벤트 사용법 (0) | 2022.04.14 |
| return과 소수점 다루기 (parseFloat, parseInt) (0) | 2022.04.14 |
| 정규식으로 이메일 형식 검증하는 법 (0) | 2022.04.12 |
