[Vue.js] vue에서의 이벤트리스너(event listener)

이벤트리스너(event listener)

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

Vue.js는 Html 이벤트 리스너를 사용한다고 한다. html 이벤트 리스너? 그럼 이벤트 리스너가 여러 종류가 있다는 의미인데 어떤게 있는지 찾아봤다. 이벤트 바인딩하는 방법은 3가지가 있는데

1. html 이벤트 핸들러 : HTML 요소의 onclick 속성에 JS 함수를 호출하여 바인딩하는 방법. (HTML과 JS 코드는 분리시켜 관리하는 것을 권장하기 때문에 좋은 방법이 아닙니다.)
2. DOM 이벤트 핸들러 : dom 요소에 이벤트를 바인딩하고 이벤트가 발생하면 실행될 코드를 함수로 작성하는 방법
3. DOM 이벤트 리스너 : addEventListener 메서드를 호출하여 이벤트를 바인딩하고, 수행할 함수를 작성하는 방법

찾아본 결과로는 vue.js는 html 이벤트 리스너를 사용한다고 했는데, 이는 HTML과 JS 코드를 분리시켜 관리하는 것을 권장하는 관심사 분리(separation of concerns) 규칙에 어긋납니다. 그럼에도 불구하고 vus.js가 html 이벤트 리스너 형식을 이용하는 이유로는

1. 핸들러 함수를 찾는 것이 쉽다.
   • HTML 템플릿을 간단히 하여 Javascript 코드 내에서 핸들러 함수를 찾는 것이 더 쉽습니다.
2. 순수 로직만 가질 수 있다.
   • Javascript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 viewModel 코드는 순수로직과 DOM이 필요하지 않습니다.
3. 이벤트 리스너가 자동으로 제거됩니다.

그렇다면 v-on 디렉티브는 addEventListener 와 같은 역할을 하는게 아닐까 싶다.