안녕하세요. 혀코입니다.
이번 시간에는 Vue의 Event Modifier에 대해서 알아보겠습니다.
Event Modifier는 click 이벤트를 받을 때 흔하게 사용하는 JavaScript를 Vue의 문법을 통해서 쉽게 제어할 수 있도록 하는 기능입니다.
Event Modifier에는 다음과 같은 종류가 있습니다.
- .stop
- .prevent
- .self
- .capture
- .once
- .passive
<a> 태그에 .prevent event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지 않게 됩니다.
<a> 태그에 .once event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지만 연결된 함수가 단 한번 실행되고 다시는 실행되지 않습니다.</a>
<a> 태그에 .prevent와 .event가 .prevent.event와 같이 chaining 형태로 동시에 사용되면, html의 기본 기능인 hyperlink가 동작하지 않고, 연결된 함수가 단 한번 실행되고 다시는 실행되지 않습니다.
<a> 태그에 .stop event modifier 가 사용되면, JavaScript의 event.stopPropagation()의 코드와 동일하게 event bubbling을 막아 부모 태그에 있는 <a>태그의 event가 실행되는 것을 막아줍니다.
<a> 부모 태그와 <a> 자식 태그가 있을때 부모태그에 .capture event modifier가 사용되면, 자식 태그를 클릭하더라도 부모태그가 먼저 실행되고 그 다음 자식 태그가 실행됩니다. 여기서 부모태그에 .capture.stop 와 같이 chaining 형태로 동시에 사용되면, 부모태그만 실행되는 것을 확인할 수 있습니다.
<a> 부모 태그와 <a> 자식 태그가 있을때, <a> 태그에 .self event modifier가 사용되면, <a> 자식 태그의 영역이 제외된 <a> 부모 태그에서만 클릭 이벤트가 동작되는 것을 확인하실 수 있습니다.
태그에서 .passive event modifier가 사용되면, scroll 이벤트를 받고 그 이벤트를 받을 때마다 로직 처리를 할때, scroll 이벤트와 로직처리를 독립적으로 분리해서 사용해서 사용자 측면에서 부드러운 컨트롤을 할 수 있습니다.
이렇게 Event Modifier에 대해서 알아봤습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글