Javascript:이벤트 편집하기

{{Javascript}}

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

==클릭 이벤트==
<syntaxhighlight lang="javascript">
const 변수 = document.querySelector('.클래스명');
function 함수명(){
    내용
    console.log('clicked')
}

변수.addEventListener('click', 함수명)
</syntaxhighlight>어떤 내용이 클릭되었을 때 함수를 작동시키는 명령.

===더하고 빼고, 변형하고===
add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.
{| class="wikitable"
!의도
!설명
!방법
|-
|클릭되면 나타나게
|클래스를 하나 더 추가하는 방법으로 2중 클래스를 부여한다.



CSS를 만들어두고 JavaScript에서 컨트롤하는 방식을 쓴다.

해당 버튼을 클릭하면 함수에서 
|CSS형태<syntaxhighlight lang="css">
.클래스명{
    display: none;
}

.클래스명.on{
    display: block;
}
</syntaxhighlight>JavaScript형태<syntaxhighlight lang="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)

</syntaxhighlight>
|}


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

window.addEventListener('scroll', scrollFunc);
</syntaxhighlight>

==리사이즈==
resize가 일어날 때의 이벤트.<syntaxhighlight lang="javascript">
//창의 높이. innerHight. css에선 vh, % 같은 개념.
//창의 넓이. innerWidth

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

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

window.addEventListener('resize', resizeFunc);
</syntaxhighlight>

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

부모에게 걸어주어 클릭한 해당 객체가 무엇인지 구분한 후 명령을 실행한다.<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>