-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
혹시 전역으로 이벤트리스너 설정이 가능한가요?
21.04.13 17:47 작성 조회수 741
1
안녕하세요~ main.js 같은 곳에 전역으로 리스너를 선언해서 각각 컴포넌트 내에서 일어나는 클릭이나 router 변경 등을 감지하고 싶은데요!
$(document).ready(function() {
let logoElement = document.getElementById('logo')
logoElement.addEventListener('click', function() {
console.log("로고를 클릭했습니다.")
})
let imgElement = document.querySelector('.img')
imgElement.addEventListener('click', function() {
console.log("이미지를 클릭했습니다.")
})
})
이런식으로 엘리먼트 하나하나 클릭할때마다 콘솔이 찍혔으면 좋겠는데 가능한가요?
부모-자식으로 구성되어있는데 하위의 하위(=자식의 자식) 레벨의 컴포넌트에서의 클릭도 인식할 수 있나요?
각 Vue 파일마다 mounted()에서 $(document).ready(~)를 통해 이벤트리스너를 달아야하는건지, 아니면 한 파일에 전역으로 선언해서 공통으로 사용할 수 있는건지 궁금해요!
또 JQuery가 아닌 Vue로 구현할 수 있는 방식이 있나요?
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2021.04.15
안녕하세요 pm님, 좋은 질문이네요 :) 뷰에서 제공하는 v-on:click 디렉티브는 위에서 적어주신 이벤트 리스너 부착 방식과 동일합니다. 따라서, 이벤트 propagation을 이용해서 최상위 HTMLElement에 클릭 이벤트 리스너를 달아주시고 아래에서 어떤 엘리먼트에서 클릭된 것인지 구분하시면 될 것 같습니다. 이 부분은 뷰의 특징이 아니라 자바스크립트의 기본적인 이벤트 전파 방식입니다. 혹시 개념이 생소하시면 아래 글 읽어보시면 될 것 같아요 :)
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
답변 1