티스토리 뷰
event (이벤트)
🙾 대상.addEventListener('이벤트종류', 할 일)
🙾 이벤트 종류
- mouseover, mouseout, mouseenter, mouseleave
- click
- scroll
- change (= input, select, radio, checout을 변경 할 때)
🙾 <head></head> 사이에
ex) 변수 mypara에 p태그 mouseover시 배경색 silver로 저장(할당)
var mypara = document.querySelector('.container p');
mypara.addEventListener('mouseenter', function(){
console.log('이벤트 발생');
mypara.style.backgroundColor = 'silver';
});
mypara.addEventListener('mouseleave', function(){
mypara.style.backgroundColor = '';
});
// 위의 방식과 비슷한 종류(mouseover / mouseout)
var mypara = document.querySelector('.container p');
mypara.addEventListener('mouseover', function(){
mypara.style.backgroundColor = 'silver';
});
var mypara = document.querySelector('.container p');
mypara.addEventListener('mouseout', function(){
mypara.style.backgroundColor = '';
});
ex) Click me 버튼을 누르면 위의 p태그 text가 파란색으로 변경
var mybtn = document.getElementById('submit');
mybtn.addEventListener('click', function(){
mypara.style.color = 'blue';
})
ex) 색상을 클릭시 body의 배경색이 선택된 색상으로 변경
var selectColor = document.querySelector('#color');
var body = document.body;
// var body = document.querySelector('body');
// var body = document.getElementsByTagName('body');
selectColor.addEventListener('change', function(){
var sclectedVal = this.value;
body.style.backgroundColor = sclectedVal;
})➡ change event가 일어난 요소: this
Tab (탭)
▏class
🙾 대상.classList.className('클래스명');
- 클래스명 교체
🙾 대상.classList.add('클래스명');
🙾 대상.classList.remove('클래스명');
🙾 대상.classList.contains('클래스명');
- true, false 조건문에서만 사용
- 클래스명이 있는 지 확인
▏highlight
🙾 요소의 위치를 파악하는 법
- 대상.offsetLeft : 가까운 부모 중 포지션 값이 기본 값이 아닌 요소를 기준 위치 반환
🙾 요소의 너비를 파악하는 법
- 대상.offsetWidth
🙾 요소의 높이를 파악하는 법
- 대상.offsetHeight
▏탭구현 방법: 속성명 활용
let tabMenu = document.querySelectorAll('.tab-menu li');
let tabContent = document.querySelectorAll('#tab-content > div');
tabMenu.forEach(item=>{
item.addEventListener('click',(e)=>{
e.preventDefault();
for(let list of tabMenu){
list.classList.remove('active');
}
e.currentTarget.classList.add('active');
// let targetId = e.target.getAttribute('href');
let targetId = e.target.getAttribute('href');
//모든 tabcontent 보이지 않도록
for(let content of tabContent){
content.style.display = 'none';
}
document.querySelector(targetId).style.display = 'block';
});
});▏탭구현 방법: 인덱스 번호
/*
tabMenu를 클릭하면 할일
모든 메뉴에서 active를 제거하고, 클릭한 그 요소에만 active 추가
클릭한 그 요소의 속성명 data-num의 값을 변수명 targetNum에 저장
모든 tabcontent를 안보이도록 하고,
targetNum에 저장된 숫자 번째 tabcontent가 보이도록
*/
let tabMenu = document.querySelectorAll('.tab-menu li');
let tabContent = document.querySelectorAll('#tab-content > div');
tabMenu.forEach((item,index)=>{
item.addEventListener('click', e=>{
e.preventDefault();
for(let menu of tabMenu){
menu.classList.remove('active');
}
e.currentTarget.classList.add('active');
for(let content of tabContent){
content.classList.remove('active');
}
tabContent[index].classList.add('active');
})
});let tabMenu = document.querySelectorAll('.tab-menu li');
let tabContent = document.querySelectorAll('#tab-content > div');
tabMenu.forEach(item=>{
item.addEventListener('click', e=>{
e.preventDefault();
for(let menu of tabMenu){
menu.classList.remove('active');
}
e.currentTarget.classList.add('active');
let targetNum = e.currentTarget.getAttribute('data-num');
for(let content of tabContent){
content.style.display = 'none';
}
tabContent[targetNum].style.display= 'block';
})
});▏탭구현 방법: activateTab 함수를 생성
/*
activateTab함수를 생성
이함수는 숫자가 들어오면, 숮자는 num
모든메뉴에서 active를 제거하고,
num번째 메뉴에 active 추가
모든 컨텐트에서 active를 제거하고,
num번째 컨텐트에 active 추가한다.
tabMenu를 클릭하면 할일
클릭한 그 요소의 index를 함수 activateTab에 전달;
*/
let tabMenu = document.querySelectorAll('.tab-menu li');
let tabContent = document.querySelectorAll('#tab-content > div');
function activateTab(num){
for(let list of tabMenu){
list.classList.remove('active');
}
tabMenu[num].classList.add('active');
for(let content of tabContent){
content.classList.remove('active');
}
tabContent[num].classList.add('active');
}
tabMenu.forEach((item,index)=>{
item.addEventListener('click', e=>{
e.preventDefault();
activateTab(index);
})
});
activateTab(0);
'JavaScript' 카테고리의 다른 글
| slideshow / sideshow (0) | 2023.06.14 |
|---|---|
| accordion / modal / back to top (0) | 2023.06.14 |
| Selector (선택자) (0) | 2023.06.07 |
| Timer & Math (0) | 2023.06.05 |
| 문자열 (IndexOf, Search / concat / replace / slice / split / length) (0) | 2023.06.05 |