| 구분 | 종류 | 설명 |
|---|---|---|
| 로딩 이벤트 | load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생합니다. |
| ready() | 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생합니다. | |
| error() | 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생합니다. | |
| 마우스 이벤트 | click() | 선택한 요소를 클릭했을때 이벤트가 발생합니다. |
| dblclick() | 선택한 요소를 연속으로 두 번 클릭했을때 이벤트가 발생합니다. | |
| mouseout() | 선택한 요소의 영역에서 마우스가 벗어났을때 이벤트가 발생합니다. 이떄 하위요소의 영향을 받습니다. | |
| mouseover() | 선택한 요소의 영역에 마우스 포인터를 올렸을때 이벤트가 발생합니다. | |
| hover() | 선택한 요소의 영역에 마우스 포인터를 올렸을떄와 벗어났을때 각각 이벤트가 발생합니다. | |
| mousedown() | 선택한 요소에서 마우스버튼을 눌렀을때 이벤트가 발생합니다. | |
| mouseup() | 선택한 요소에서 마우스버튼을 눌렀다 떼었을때 이벤트가 발생합니다. | |
| mouseenter() | 선택한 요소의 범위에 마우스 포인터를 올렸을때 이벤트가 발생합니다. | |
| mouseleave() | 선택한 요소 범위에서 마우스 포인터가 벗어났을때 이벤트가 발생합니다. | |
| mousemove() | 선택한 요소 범위에서 마우스 포인터를 움직였을때 이벤트가 발생합니다. | |
| scroll() | 가로, 세로 스크롤바를 움직일떄마다 이벤트가 발생합니다. | |
| 포커스 이벤트 | focus() | 선택한 요소에 포커스가 생성되었을때 이벤트가 발생하거나 선택한요소에 강제로 포커스를 생성합니다. |
| focusin() | 선택한 요소에 포커스가 생성되었을때 이벤트가 발생합니다. | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 떄 이벤트가 발생합니다. | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 합니다. | |
| change() | 이벤트 대상인 입력 요소의 갑싱 변경되고, 포커스가 이동하면 이벤트가 발생합니다. 그리고 강제로 change 이벤트를 발생시킬 때도 사용합니다. | |
| 키보드 이벤트 | keypress() | 선택한 요소에서 키보드를 눌렀을 떄 이벤트가 발생합니다. 그리고 문자 키를 제외한 키의 코드값을 반환합니다. |
| keydown() | 선택한 요소에서 키보드를 눌렀을 떄 이벤트가 발생합니다. 키보드의 모든 키의 코드값을 반환합니다. | |
| keyup() | 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생합니다. |
01. 슬라이드 이펙트 - 트랜지션 효과
트랜지션 효과에 관한 예제입니다.
{
window.onload = function(){
let currentIndex = 0; // 현재 이미지
const slider = document.querySelectorAll(".slider"); // 모든 이미지를 변수에 저장
slider.forEach(img => img.style.opacity = "0"); // 모든 이미지를 투명하게
slider[0].style.opacity = "1";
// 이미지를 변경
setInterval(() => { // 3초에 한번씩 실행
let nextIndex = (currentIndex + 1) % slider.length; // 0 1 2 3 4 0 1 2 3 4
slider[currentIndex].style.opacity = "0"; // 첫번째 이미지가 사라짐
slider[nextIndex].style.opacity = "1"; // 두번째 이미지가 나타남
slider.forEach(img => img.style.transition = "all 1s"); // 이미지 애니메이션 추가
currentIndex = nextIndex; // 두번째 인덱스값을 현 인덱스값에 저장
console.log(currentIndex);
}, 3000);
}
}
01. currentIndex = 0;으로 현재 이미지를 표현합니다.
02. 모든 이미지를 변수에 저장합니다.
03. forEach문을 사용하여 모든 이미지를 투명하게 합니다.
04. setInterval()메서드로 3초에 한번씩 이미지를 변경합니다.
05. opacity로 이미지를 사라지고 나타나게 할 수 있습니다.
02. 슬라이드 이펙트 - 좌로 움직이기
좌로 움직이는 예제입니다.
{
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
// 변수 설정
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
// 애니메이션
sliderInner.style.transform = "translateX(-0px)"; // -800 * 0
sliderInner.style.transform = "translateX(-800px)"; // -800 * 1
sliderInner.style.transform = "translateX(-1600px)"; // -800 * 2
sliderInner.style.transform = "translateX(-2400px)"; // -800 * 3
sliderInner.style.transform = "translateX(-3200px)"; // -800 * 4
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
}, sliderInterval);
}
01. 선택자를 지정합니다.
02. currentIndex로 현재 보이는 이미지를 변수설정하고, slideCount와 sliderInterval변수에 각각 이미지 갯수와 이미지 변경 간격시간을 설정합니다.
03. -800px만큼 x축으로 이동하는 애니메이션 코드를 작성합니다.
04. setInterval메서드로 이미지 변경 간격 시간을 지정합니다.
03. 슬라이드 이펙트 - 좌로 움직이기(연속적으로)
좌로 연속적으로 움직이는 에제입니다.
{
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
// 변수 설정
let currentIndex = 0; // 현재 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 2000; // 이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; // 이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);
// 복사한 이미지를 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect (){
currentIndex++;
sliderInner.style.transition = "all 0.6s ease-in";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
// 마지막 이미지가 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700)
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
}
01. 선택자를 지정합니다.
02. 현재 이미지, 이미지 갯수, 이미지 변경 간격 시간, 이미지 가로 값등을 변수에 설정합니다.
03. 첫번째의 이미지를 복제하고, 복제한 이미지를 appendChild메서드를 이용하여 마지막에 붙여넣기합니다.
04. sliderEffect함수에 이미지 변경 애니메이션 코드를 작성합니다.
05. setInterval메서드로 지정한 이미지 변경 간격 시간마다 sliderEffect함수를 실행합니다.
06. 만약 현재 이미지의 값과 이미지 갯수 값이 같아진다면 초기화합니다.