자바스크립트 기초 5 - 이벤트 처리

 

1. 이벤트 연결

<script>
window.onload = function() { };
</script>

위와 같이 window 객체의 onload 속성에 함수 자료형을 할당하는 것을 "이벤트를 연결한다"고 한다.

 

<script>
window.onload = () => { }
</script>

화살표 함수를 사용하여 작성하기

onload를 이벤트 속성이라고 하며 이벤트 속성에 할당한 함수를 이벤트 핸들러라고 한다. 

 

 

👾 간단한 이벤트 연결 예시

<script>
window.onload = () => {
    var header = document.getElementById('header');

    header.onclick = () => {
        alert('하염하염');
    }
}
</script>

만약 이벤트 핸들러를 제거하고 싶다면 이벤트 속성에 null을 넣어주면 된다.

아래 코드는 이벤트 핸들러가 한 번 실행된 이후에 이벤트를 제거하므로 두 번째 클릭부터는 이벤트가 발생하지 않는다.

 

window.onload = () => {
    var header = document.getElementById('header');

    header.onclick = () => {
        alert('하염하염');

        header.onclick = null;
    }
}

 

 

2. 이벤트 발생 객체와 이벤트 객체

이벤트 핸들러 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있다.

window.onload = () => {
    document.getElementById("header").onclick = function() {
        this.style.color = 'white';
        this.style.backgroundColor = 'orange';
    }
}

 

 

 

 

 

위 코드를 실행해보면 Id가 header인 객체의 스타일이 바뀌는 것을 알 수 있다.

이벤트 핸들러 안에서 this 키워드의 스타일을 바꾸는 것은 이벤트를 발생한 객체의 스타일을 변경하는 것이다.

 

 

 

 

3. 표준 이벤트 모델

표준 이벤트 모델은 이벤트를 연결할 때 다음과 같은 메서드를 사용한다. 

addEventListener(eventName, handler, useCapture)
removeEventListenr(eventName, handler)

 

2번과 같이 onclick을 쓰는거 보단 메서드를 이용해 이벤트 연결하기

매개 변수 useCapture는 입력하지 않으면 자동으로 false를 입력한다. (캡쳐/버블 이해할 때 도움이 된 유튜브)

 

 

👀 addEventListener()를 사용한 클릭할 때마다 '+' 붙이기

window.onload = () => {
    let header = document.getElementById('header');

    header.addEventListener('click', function () {
       this.innerHTML += '+'; 
    });
}

 

실행결과