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);

이벤트 델리게이션

event delegation. 클릭이벤트가 일어날 때 매번 다양한 클릭이벤트를 정의하는 것을 막기 위해 사용한다.(for문으로 이벤트를 체크하기도 하지만, 성능에 부하가 걸린다.) 부모에게 걸어준다.

부모에게 걸어주어 클릭한 해당 객체가 무엇인지 구분한 후 명령을 실행한다.

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

function delegation(e){
    let target = e.target;  // 이벤트객체 e를 이용한 것. 어떤 것을 클릭했는지 알려준다.
    console.log(target);
    while(!target.getArribute('속성')){
        target = target.parentNode;  //찾는 속성이 없는 경우, 부모에서 속성을 찾는다.
        if(target.nodeName === 'BODY'){target = null; return;}  // 바디까지 올라가도 없으면 없음. 종료시켜준다.
    }
    if(target.matches('[속성명="값"]')){
        해당 버튼에 대한 명령
    }else if(target.matches('[속성명2="값2"]')){
        해당 버튼에 대한 명령
        target.classList.toggle('on');  // 실시간으로 좋아요 버튼을 활성화하는 등에 쓰인다.
}

window.addEventListener('click', delegation);