이벤트 핸들러
VueJS에서는 이벤트 핸들러를 두가지 방식으로 정의할 수 있는데, 인라인 방식과 메소드 방식이다.
인라인 이벤트 핸들러
인라인 이벤트 핸들러란 HTML 템플릿 안에서 직접 자바스크립트 표현식을 작성하여 이벤트 핸들러를 정의하는 것을 말한다.
코드 복사하기
→ @click 은 VueJS에서 클릭 이벤트를 바인딩하는 디렉티브이다.
→ printEventInfo('Hello Vue3', $event) 는 클릭 이벤트가 발생할 때 실행할 자바스크립트 표현식이다.
•
화면 확인
→ $event란 이벤트 객체를 참조할 수 있는 변수이다.
→ event.target은 이벤트가 발생한 DOM 전체를 가지고 있다.
keyUp이벤트 핸들러
input태그에 @keyUp 으로 이벤트 핸들러를 사용해 보았다.
이렇게 키보드에 입력되는 값을 가져올 수 있다.
이벤트 수식어 (Modifiers)
보통 자바스크립트에선 이벤트를 처리할 때 다른 메소드 영향 없이 독립적으로 실행하기 위해서는 event.preventDefault() 같은 메소드를 작성하고 메소드를 작성하는 경우가 많은데, 이게 되게 비효율적이다. 이 문제를 해결하기 위해서 vue는 다양한 이벤트 수식어를 제공한다.
코드 예제
코드 복사하기
현재 코드 구조는 클릭이 가능한 DIV, P 영역안에 SPAN영역을 클릭하는 경우이다.
•
확인
span영역만 클릭을 했는데, 오른쪽 아래부분에 모든 요소가 클릭메소드가 실행된 것을 볼 수 있다.
이렇게 불필요한 이벤트 전파를 중단하기 위해서 이벤트 수식어가 필요하다.
.stop 수식어
span영역 클릭 이벤트 리스너에 .stop 을 달면, 클릭한 이벤트 이외에 어떤 것도 실행이 되지 않는 것을 확인할 수 있다.
.prevent 수식어
이렇게 이벤트가 두개가 선언이 된 a태그를 클릭하는 상황이다.
클릭을하면 이렇게 좋아요가 뜨고, naver로 이동했다.
클릭 이벤트에서 좋아요만 뜨게 할려면 .prevent수식어를 사용할 수 있다.
•
prevent 사용하기
prevent를 사용했음에도 불구하고 네이버로 넘어간 까닭은 a태그 내부에 다른 리스너는 막았지만, 이벤트 버블링으로 전파된 div이벤트가 실행이 되었기 때문이다.
이때 우리는 수식어 두개를 연속으로 사용함으로서 클릭한 이벤트만 실행되고 다른 곳으로 전파되지 않는다.
•
결론
이렇게 사용하면 된다.
.capture 수식어
기존 span영역을 클릭해서 버블링을 허용한다면 이렇게 span부터 1,2,3 으로 실행된다. 하지만 .capture 수식어는 해당 요소를 먼저 실행하게 만들수 있다.
•
코드예제
이렇게 div태그에 capture를 달아보자.
•
확인
이렇게 div → span → p 순으로 실행이 되었다.
.self 수식어
이렇게 p태그에만 self수식어를 달았다.
•
확인
그럼 이렇게 클릭을 하면, p태그는 자기가 클릭된것이 아니므로 실행되지 않고,
self수식어가 없응 div태그는 버블링 되어 같이 실행이 된다.
내가 클릭이 안되면 실행안한다 그런 뜻이다. 버블링은 막지않는다.
버블링까지 막으려면, .self.stop 으로 사용할 수 있다.
.once 수식어
이벤트를 한번만 실행하는 .once수식어
•
확인
여러번 클릭해도 한 번만 출력이 되는 것을 확인할 수 있다.
키 수식어
키보드 이벤트를 수신할 때 종종 특정 키를 확인해야 하는 경우가 있는데, 이 때 키 수식어를 사용한다.
.enter 키 수식어
코드 복사하기
현재 인풋필드에 키를 입력하면 배열이 추가가되는 로직이다.
현재는 키가 입력될 때마다 배열이 추가가 되는 상황
•
.enter 수식어 사용
코드 복사하기
이렇게 .enter 수식어를 달아주면 키를 입력할 때는 반응을 하지 않고, 엔터를 누를때만 이벤트를 실행한다.
•
확인
엔터를 눌려야 li 태그에 추가가 된다.
시스템 키 수식어
시스템 키를 누르면서 키를 입력해야 이벤트를 트리거 하게 할 수 있다.
코드 예제
아까 거기서 .ctrl만 추가해보자.
그럼 그냥 엔터치면 안되고, ctrl+enter를 쳐야된다.