이벤트

이벤트라는 웹페이지에서 일어나는 모든 사건을 말한다

우리는 자바스크립트에서 일어날 사건에 대응하는 함수를 미리 준비해 놓고

사건을 감지해서 그에 맞게 준비해 놓은 함수를 실행시키도록 할 수 있다

<h1>JS EVENT</h1>

<div class="container">
    <div class="test a">A</div>
    <div class="test b">B</div>
    <div class="test c">C</div>
</div>

웹페이지에서 가장 흔하게 일어나는 이벤트는 무엇일까?

바로 클릭 이벤트이다

a박스를 클릭하면 박스에 빨간테두리를 생성하는 간단한 코드를 만들어보자

이전 포스팅에서 자바스크립트로 클래스 이름을 추가하는 것이 응용된다

.apply {
    border: red solid 2px;
}

빨간색 테두리를 만드는 apply코드

const boxA = document.querySelector('.a');

boxA.addEventListener('click', function(){
    boxA.classList.add('apply');
})

이 스트립트 코드는 html마크업의 body의 하단에 추가했다

우선은 a박스를 조작하기위해서 자바스크립트의 변수에 담아야한다

그리고 addEventListener를 메소드를 이용하면되는데

첫번째 인자에는 발생할 이벤트의 이름을 문자열로 넣고

두번째 인자에는 그 이벤트가 발생했을 때 실행할 함수를 넣어주면 된다

여기서는 박스A에 apply를 추가하는 익명 함수를 넣었다

제대로 작동한다

---

위에서 스크립트 코드를 body밑에 넣고 실행했는데

head에 넣고 실행할 경우

와 같은 에러가 난다

const boxA = document.querySelector('.a');

부분에서 querySelector가 .a클래스를 찾지 못하기 때문인데

그 이유는 html파싱이 되기 전에 자바스크립트 코드를 만났기 때문에 자바스크립트에서 접근할 dom트리가 만들어지지 않은 것

이를 해결하기 위해선

    window.addEventListener('load',function () {
        const boxA = document.querySelector('.a');

        boxA.addEventListener('click', function(){
            boxA.classList.add('apply');
        })
    })

load이벤트는 로드가 끝났을 때 발생하는 이벤트로

전역 객체인 window의 로딩이 끝나면 위에서 만들어본 클릭 이벤트를 다시 익명 함수로 감싸 실행하게 만들었다

이 경우에 약간의 문제점이 있는데

window에 로딩하는데 매우 오래걸리는 리소스가 있다면 그 로딩이 끝나기 전까지 이벤트가 적용이 되지 않는 것

예를 들어서

다음 페이지로 넘어가는 버튼과 본문에 로딩하는데 10초가 걸리는 리소스가 있다고 가정하면

이번 페이지의 내용이 필요없어서 다음 페이지로 바로 넘어가려해도 그 내용이 로드되는 10초동안은 버튼을 눌러도 다음 페이지로 넘어갈 수 없다는 것

이런 상황을 방지하기 위해

    window.addEventListener('DOMContentLoaded',function () {
        const boxA = document.querySelector('.a');

        boxA.addEventListener('click', function(){
            boxA.classList.add('apply');
        })
    })

load이벤트가 아닌 DOMContentLoaded이벤트로 대체한다

DOMContentLoaded이벤트는 window의 용량이 큰 동영상이나 이미지의 로드를 기다리지 않고 DOM트리가 만들어지면 발생하는 이벤트이다

---

저렇게 전역 객체에 이벤트를 부여하는 귀찮음을 피하기 위해서

head에 스크립트 코드를 넣기보단 body밑에 스크립트 코드를 넣어서 html를 다 불러 온 뒤에 스크립트 코드가 작동하게 만들어주었다