[자바스크립트] 이벤트 리스너와 콜백함수(javascript callback)

오늘은 자바스크립트 이벤트 리스너와 콜백함수를 다뤄보도록 하겠습니다.

 

이벤트 리스너 ?

이벤트 리스너는 쉽게 말해 어떠한 이벤트에 대해 대기중인 상태를 말합니다. 항상 리스닝(들으며) 대기중인거죠.

해당 이벤트가 발생했을 때 등록해놨던 이벤트 리스너가 실행됩니다.

위의 코드를 아마 한버 보신 적이 있을겁니다. 이 코드가 대표적인 이벤트 리스너인데요. window가 load될 때 function 부분이 실행이 되는겁니다. 그럼 load 되었다는 것을 누가 알려줄까요? 바로 브라우저가 알려줍니다.

비슷한 코드로, 그리고 자주 사용하는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + "이벤트 명"으로 명명됩니다.

onclick, onkeypress, onmousemove 등 처럼요.

window 객체 말고도, 여러 태그에 각각 이벤트를 설정할 수 있습니다. 왜냐하면 모든 DOM 들이 이벤트 리스너를 등록할 수 있는 속성들을 가지고 있기 때문입니다. 

콜백

위 두 코드에서 function 부분을 콜백이라고 부릅니다. 영어로는 callback인데 call + back 즉, 다시 알려주는거죠. 이벤트가 실행됐을 때, 사용자에게 다시 알려주는 것입니다. 

꼭 이벤트가 아니더라도 콜백을 활용할 수 있는데요. 주어진 숫자부터 1까지 더하는 간단한 로직을 짜보겠습니다.

위의 코드를 한번 보시기 바랍니다. addNumber 함수의 매개변수 callback이 바로 콜백 함수를 받는 부분입니다. 

addNumber를 호출할 때 두 번째 인자로 function을 넣은게 보이시죠? 그 함수가 콜백함수로 등록되어 계산이 끝난 후 실행이 됩니다. 콜백만 등록해두면 계산이 끝난 후 알아서 알려줍니다.

위의 예시에서는 워낙 간단한 계산이라 별로 효율적이라는 것을 못느끼셨겠지만, 만약 addNumber의 작업 시간이 10초 이상이 걸리는 일이라고 한다면, addNumber가 끝나고 다음 코드를 실행할 때까지 10초나 기다려야합니다. 그렇게 하지말고 콜백을 등록한 다음 다음에 바로 다음 로직으로 넘어가는 것입니다. 알아서 작업이 끝난 후에 알려주도록 만들고요. 이렇게 콜백은 언제 끝날지 모르는 동작에 대해 그 결과를 전달받을 때 유용합니다. 하염없이 기다릴 필요가 없어서 다 됐을 때 알아서 알려주니까 엄청 편리합니다.

이벤트 버블링

이벤트 버블링이라고 들어보셨나요? DOM에 연결한 이벤트는 버블링이 일어나는데요. 버블링이란 자식의 이벤트가 부모에게도 전달되는 것을 말합니다.

위와 같은 구조가 있을 때 #third를 클릭한 경우, 부모와 조상 태그인 second, first 순으로 같은 클릭 이벤트가 발생합니다. 이 현상을 기억하시길 바랍니다.

이벤트 객체

DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있습니다. 이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 메소드들이 들어있습니다.

대표적인 메소드로 preventDefault, stopPropagation그리고 stopImmediatePropagation 이 있습니다.

preventDefault 메소드는 태그의 기본동작 (에를 들면, a 태그는 클릭 시 링크이동, form 태그는 폼 내용 전송)을 하지 않게 막아주는 역할을 합니다.

stopPropagation 메소드는 태그를 클릭 시 부모에게 이벤트가 전달(버블링)되지 않도록 합니다.

stopImmediatePropagation 메소드는 버블링을 막음과 동시에 다른 이벤트도 발생하지 않도록 합니다. 만약 클릭 이벤트와 마우스오버 이벤트를 동시에 연결한 경우, stopPropagation으로 클릭 이벤트를 막아도 마우스오버 이벤트는 실행됩니다. 하지만, stopImmediatePropagation으로 클릭 이벤트를 막으면 부모에게는 어떠한 이벤트도 버블링되지 않으면서 마우스오버 이벤트도 실행되지 않습니다.

가끔 html 자체에 이벤트 리스너를 연결하시는 분이 있는데요.

이 자체도 별로 권장하지는 않지만(원래 html과 javascript는 분리가 원칙입니다), 여기서도 실수를 하시는 분이 정말 많습니다.

이렇게 함수를 연결한다고 showResult 뒤에 ()를 붙이는 경우가 많은데 절대로 이렇게 해서는 안됩니다. 이벤트 리스너는 자동으로 이벤트 발생 시 함수 뒤에 ()를 붙여줍니다. 그래서 그냥 showResult만 등록해두어도 이벤트 발생 시에는 showResult()가 실행됩니다. 만약 위의 상황처럼 하는 경우는 이벤트 리스너를 등록할 때부터 벌써 showResult 함수가 호출됩니다. 아직 이벤트가 발생하지도 않았는데 말이죠. 만약 ()를 붙여야할 필요가 있는 경우

이렇게 function으로 한번 더 감싸줍니다. 그러면 이벤트가 발생했을 때 호출되어 안전하게 실행됩니다.