Javascript:이벤트

틀:Javascript

1. Javascript:개요
2. Javascript:변수, 상수
   1. Javascript:자료구조
3. Javascript:연산자
4. 분기문
   1. Javascript:조건문
   2. Javascript:반복문
5. Javascript:선택자
   1. Javascript:요소 내용 변경
   2. Javascript:HTML로부터 데이터 받기
6. Javascript:이벤트
   1. Javascript:클릭 이벤트
7. Javascript:AJAX
   1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
8. Javascript:활용
   1. Javascript:표 정렬

개요

클릭이나 어떤 작업의 완료 등 이벤트를 만들거나 이벤트 이후 작업을 지정할 수 있다.

클릭 이벤트

const 변수 = document.querySelector('.클래스명');
function 함수명(){
    내용
    console.log('clicked')
}

변수.addEventListener('click', 함수명)

어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.

더하고 빼고, 변형하고

add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.

의도	설명	방법
클릭되면 나타나게	클래스를 하나 더 추가하는 방법으로 2중 클래스를 부여한다. CSS를 만들어두고 JavaScript에서 컨트롤하는 방식을 쓴다. 해당 버튼을 클릭하면 함수에서	CSS형태 .클래스명{ display: none; } .클래스명.on{ display: block; } JavaScript형태 const 변수 = document.querySelector('.클래스명'); const 변수2 = document.querySelector('.클래스명.on'); function 함수명(){ //변수.classList.add('on'); //해당 클래스에 on이라는 클래스를 추가한다. //this.classList.add('on'); //위처럼 쓸 수도 있지만, 현재 클릭한 것에 적용한다는 의미의 this가 상당히 잘 쓰인다. this.classList.toggle('on'); //위처럼 쓰고, 아래의 함수와 연계해 쓸 수도 있지만, on이 있으면 빼고, on이 없으면 더하는 기능이 있다. } // function 함수명2(){ // this.classList.remove('on'); // } 변수.addEventListener('click', 함수명) //변수2.addEventListener('click', 함수명2)

스크롤

function scrollFunc(){
    //console.log(pageYOffset); //스크롤을 얼마나 했는지 그 좌표를 보여준다.  // 브라우저의 화면 크기에 따라 최대값이 달라진다.
    let pageHeight = document.body.scrollHeight;  // 최대 스크롤 가능한 좌표를 변수에 담는다.
    let scrollHeight = pageYOffset + window.innerHeight;  // pageYOffset은 내부 크기만큼 빠진 값이 계산된다. 때문에 내무 크기를 더한다.
    
    if(scrollHeight >= pageHeight){
        비동기통신 명령
    }
    
}

window.addEventListener('scroll', scrollFunc);

리사이즈

resize가 일어날 때의 이벤트.

//창의 높이. innerHight. css에선 vh, % 같은 개념.
//창의 넓이. innerWidth

const box = document.querySelector('.box');

function resizeFunc(){
    box.style.right = '${innerWidth *0.5}px';  // 해당 위치, 속성값을 바꿀 수 있다.
}

window.addEventListener('resize', resizeFunc);