이벤트 등록하기

목차
1. onEvent
2. addEventListener
3. 두 방법의 차이

 

DOM요소를 다룰 때 어떤 요소에 대해 행해지는 동작을 이벤트라고 한다. 그런 이벤트가 발생했을 때 원하는 기능을 구현할 수 있는데 그 방법을 알아보고자 한다. 

1. onEvent

•  요소에 특정 이벤트가 발생할 때 실행할 어떤 기능을 정의하는 방법

Event는 요소에 따라 다른 이벤트를 지원할 수 있다. 

//사용방법
onEvent = 콜백함수

//ex)
document.onclick = function(){
    console.log("클릭")
}

위의 예시는 브라우저의 화면을 클릭하면 콘솔에 클릭이라는 글자가 출력된다. 해당 방법은 요소에 이벤트를 할당하는 방식으로 이벤트 앞에 on을 붙여준다.

2. addEventListener

• 특정 요소에 특정 이벤트가 발생할 때 실행할 어떤 기능을 추가하는 방법

//사용방법
요소.addEventListener(이벤트명,콜백함수);

//ex)
document.addEventListener("click",()=>{
    console.log("클릭");
})

해당 방법은 addEventListener메서드에 첫번째 인자로 추가하는 이벤트를 on을 붙이지 않고 문자열로 지정하고, 두번째 인자는 수행할 콜백함수를 지정한다. 그럼 해당 요소에 이벤트가 추가된다.

3. 두 방법의 차이 

이벤트를 등록하는 두 방법에 대해 알아보았다. 그렇다면 아무렇게 사용하면 되는걸까? 당연히 아니다. 필요에 따라 구분해서 사용해야하는데 각각의 차이점을 알아보고 언제 사용하지 판단하여야한다.

 

on이벤트로 등록을 했을 때는 콜백함수를 할당한다. 따라서 중복해서 할당할 경우 나중에 할당된 콜백함수를 사용하게 된다. 

브라우저 화면을 클릭했을 때 첫번째 클릭이라는 문자열을 출력하는 함수가 실행하도록 되었지만 

바로 다음 다시 할당을 하니 두번째 클릭이라는 문자열을 출력하도록 함수의 내용이 바뀌었다.

 

이벤트 리스너를 통해 이벤트를 등록하면 배열의 형태로 이벤트가 계속 추가된다. 따라서 클릭 이벤트를 계속 등록하게 되면 클릭 했을때 배열에 있는 연관된 콜백함수가 모두 실행된다. 

브라우저 화면을 클릭했을 때 첫번째 클릭이라는 문자열을 출력하는 함수를 실행하도록 추가했을 때 handler가 등록되었다.

그리고 같은 이벤트가 등록이 되었는데 두개의 이벤트가 등록이 되었다. 따라서 브라우저 화면을 클릭하게 되면 두개의 함수가 모두 실행되어 콘솔에는 첫번째 클릭과 두번째 클릭이 모두 출력된다.

이벤트 리스너를 이용하는 방법은 이 점을 주의해서 사용하여하야 한다.