코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
document.querySelector('.black-bg').addEventListener('click', function(e){
e.target; //실제 클릭한 요소
e.currentTarget // 이벤트 리스너가 부착된 곳
this; //e.currentTarget와 동일함
e.preventDefault() //이벤트 기본 동작 막기
e.stopPropagation() // 상위 요소의 이벤트 버블링 막기
})
☞ function 안에 e를 넣으면 이벤트 함수를 사용 할 수 있다.
document.querySelector('.black-bg').addEventListener('click', function(e){
if(e.target == document.querySelector('.black-bg') ) {
document.querySelector('.black-bg').classList.remove('show-modal')
}
})
☞ 검은 화면 클래스를 찾아서 이벤트 리스너를 붙여서 show-modal이라는 클래스를 없애서 사라지게 하는 형식
☞ if문이 들어가는 이유는 검은배경 클릭이 아닌 하얀배경이나 다른 요소를 클릭해도 검은배경을 클릭한걸로 인식하는 이벤트 버블링 현상때문에 실제 클릭한 요소일 경우에만 닫도록 해야하기 때문이다.
모든 웹 브라우저는 이벤트 버블링이 발생함.
이벤트 버블링은 하위의 html요소를 클릭해도 상위 html요소로 퍼지는 현상
[HTML]
<div class="container mt-5">
<ul class="list">
<li class="tab-button">Products</li>
<li class="tab-button orange">Information</li>
<li class="tab-button">Shipping</li>
<li class="tab-button">Shipping2</li>
</ul>
<div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
<div class="tab-content">
<p>배송정보2입니다. Shipping2</p>
</div>
</div>
[JS]
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');
}
☞ 이런식으로 함수를 사용해서 축약이 가능하다.
☞ 함수를 축약할때 변수가 있으면 파라미터로 바꿔야 작동이 된다.
이벤트 리스너를 줄이면 줄일수록 램을 절약 할 수 있다.
document.querySelector('.list').addEventListener('click', function(e){
if(e.target == document.querySelectorAll('.tab-button')[0]){
탭열기(0);
}
else if(e.target == document.querySelectorAll('.tab-button')[1]){
탭열기(1)
}
else if(e.target == document.querySelectorAll('.tab-button')[2]){
탭열기(2)
}
})
function 탭열기(숫자){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(숫자).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(숫자).addClass('show');
}
data-자료이름="값"
<ul class="list">
<li class="tab-button" data-작명="값">Products</li>
</ul>
☞ 출력은 셀렉터.dataaset.자료이름
예시 : document.querySelector('.tab-button').dataset.id //0 출력
<ul class="list">
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
<li class="tab-button" data-id="3">Shipping2</li>
</ul>
document.querySelector('.list').addEventListener('click', function(e){
탭열기(e.target.dataset.id)
})
function 탭열기(숫자){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(숫자).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(숫자).addClass('show');
}
☞ html에 data 자료를 넣어서 출력할 수 있음. console.log(e.target.dataset.id)도 출력 가능함
오늘의 한줄평 : 이벤트 버블링이랑 data 자료 숨기기가 새로웠음.
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui