이벤트리스너

했던것들/Vue.JS

실습) vue 이벤트 바인딩

리렌더링되는 부분이 데이터가 변하는 부분만으로 한정되어있음을 볼 수 있다. vue의 내부 동작을 통해 반응형 데이터만 리렌더링 함으로써 효과적으로 브라우저 기능을 사용하고 있다. HTML Vue Events Events in Action Add 5 // 상수 5가 파라미터로 전달됨 Reduce 5 // 상수 5가 파라미터로 전달됨 Result: {{ counter }} // 이벤트객체가 파라미터로 전달됨 // 이벤트객체와 문자열이 파라미터로 전달됨 Name: {{ name }} Age & Gender: {{ ageGender }} 이벤트는 v-on: 으로 HTML 엘레먼트에 바인딩시킬 수 있다. 일단 이벤트 종류는 바닐라 자바스크립트와 같다. v-on:click="바인딩할메서드" 형태로 사용한다. 일단 ..

Javascript

circle live 10 ( 이벤트버블링, stopPropagation() )

코드 보기 screen div가 position fixed로 인해 모든 화면을 차지하고 있으며, const main으로 설정되어 있다. 따라서 화면의 어느 곳을 클릭하더라도 main.addEventListener('click', () => { }) 이 동작하게 된다. main 화면에 클릭이벤트가 감지되면 콜백함수가 실행되며, 생성자 함수 Circle이 실행된다. 생성자 함수 Circle은 이벤트 객체의 clientX좌표와 clientY좌표를 인수로 받는다. 생성자 함수는 circle 클래스명을 가진 동그란 div를 가지고 main에 append 된다. (즉, main의 자식요소가 된다.) 문제는 동그란 div들도 이벤트리스너를 가지고 생긴다는 점이다. 따라서 click 이벤트는 stopPropagatio..

2DC
'이벤트리스너' 태그의 글 목록