💡이벤트 버블링 이란?
페이지 내에 어떤 태그에 이벤트가 발생하면 그의 모든 상위 요소까지 실행되는 현상을 말한다.
ex)클릭 이벤트의 경우
어떤 태그에 클릭이 발생 되면 그의 모든 상위 요소까지 자동으로 이벤트가 적용된다.
<div>
<div>
<p>안녕</p>
</div>
</div>
요런식으로 되어 있는데 p태그를 한번 클릭했을 뿐인데,
브라우저는 p, div, 맨위의 div 총 세번이 클릭되었다고 인지한다.
이것이 바로 이벤트 버블링.
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html" onsubmit="submit_result()">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
이런것 때문에 문제가 발생하는 경우는
모달창의 배경('black-bg')을 클릭하면 모달창이 닫게 하도록 코드 짰는데,
이제는 그 모달안에 있는 인풋창 혹은 white-bg클릭을 해도 모달창이 닫히도록 적용되어 버린다.
그래서 이벤트리스터 함수에 파라미터에 아무거나 추가하면
(통상적으로는 'e') 이런 이벤트 관련한 유용한 함수들을 사용 가능하다.
✔️e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
✔️ e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
✔️ e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
✔️ e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
document.querySelector('.black-bg').addEventListener('click', function(e){
if ( e.target == document.querySelector('.black-bg') ) {
document.querySelector('.black-bg').classList.remove('show-modal');
}
})
위의 파라미터와 함수를 사용하면
이벤트 버블링을 막을 수 있다.
그리고,
for (let i = 0; i < $('.tab-button').length; i++){
$('.tab-button').eq(i).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(i).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(i).addClass('show');
})
};
이렇게 되어있는 것을 우선 함수로 축약할 때,
for (let i = 0; i < $('.tab-button').length; i++){
$('.tab-button').eq(i).on('click', function(){
탭열기(i)
})
};
function 탭열기(구멍){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(구멍).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(구멍).addClass('show');
}
이렇게 가능함. 그런데, 해당 함수안에 변수가 있다면
파라미터 처리로 해주어야 활용이 가능함.
이벤트 버블링을 이용하면,
tab-button에 각각 이벤트를 주는 것 보다 그 상위 요소인 .list에 주는 것이 더 간편.
이렇게 이벤트 리스너를 줄여서 코드 짜는 이유는
✔️버튼이 몇십개 있다면 이렇게 짜는것이 덜 복잡하고,
✔️ 이벤트리스너를 줄이면 램용량을 절약할 수 있다.
$('.list').click(function(e){
if (e.target == document.querySelectorAll('.tab-button')[0] ){
탭열기(0)
}
if (e.target == document.querySelectorAll('.tab-button')[1] ){
탭열기(1)
}
if (e.target == document.querySelectorAll('.tab-button')[2] ){
탭열기(2)
}
})
function 탭열기(){
생략
}
