자바스크립트이벤트 (4) 썸네일형 리스트형 <자바스크립트 기초> 17. 마우스 이벤트 * 마우스 이동 이벤트 - CSS로 3D 처리된 공간을 좀 더 인터랙티브하게 보이기위해 마우스의 이동에 따라 각도가 조금씩 변하게 만들어보자. 즉 다음 그림과 같이 만들어볼 것이다. - 위와 같은 처리를 위해 다음과 같이 생각할 수 있다. ① 이벤트 리스너에 mousemove 를 사용한다. ② 이벤트 리스너에 함수를 넣고 거기에 객체를 통해 .clientX 와 .clientY 로 마우스의 좌표 값을 가져온다. ③ 마우스의 좌표를 적당하게 사용하기 위해 끝에서 끝까지를 -1에서 +1까지 숫자로 나타내어 사용할 것이다. 이는 창의 전체에서 좌표의 비율을 사용하면 가능할 것이다. ④ 3D가 적용된 공간의 스타일객체에 transform 속성에 rotateX와 rotateY를 입력한다. - 위를 코드로 나타내어 .. <자바스크립트 기초> 15. 애니메이션 다루기 * 트랜지션 - CSS의 트랜지션을 자바스크립트에서 좀 더 세밀하게 다뤄보자. - 먼저 HTML과 CSS를 이용하여 공모양의 ball클래스를 만들었다고 가정하자. - 이를 왼쪽 위에 붙여두기위해 앱솔루트 포지션을 주었고, 웹 문서에서 클릭을 하는 곳에 공이 따라오도록 하는 스크립트를 작성할 것이다. const ballElem = document.querySelector('.ball'); window.addEventListener('click', function (e) { ballElem.style.transform = 'translate('+(e.clientX-15)+'px, ' + (e.clientY-15)+ 'px)'; }) ballElem.addEventListener('transitionend',.. <자바스크립트 기초> 13. 이벤트 (2) * 이벤트 위임 - 우리는 지난 장에서 for문을 통해 각각의 리스트에 리스너를 달아주고 클릭시 함수가 실행되도록 하는 이벤트를 만들었다. 그러나 이는 양이 많아지면 많아질수록 리스트가 많아진다. DOM 스크립트가 많아질수록 웹이 무거워지므로 우리는 리스너를 줄일 수 있는 방법을 알아보자. - 이벤트 위임이란 리스너를 부모태그에게만 줌으로써 리스너의 사용을 최소화 하는 것이다. var currentMenu; var menu = document.querySelector('.menu'); function clickHandler(e) { if (currentMenu) { currentMenu.classList.remove('menu-active') } e.target.classList.add('menu-act.. <자바스크립트 기초> 12. 이벤트 (1) * 이벤트란 - 이벤트란 정적인 상태의 웹에서 특정한 동작을 시행하는 것을 의미한다. - 예를 들어 웹문서가 로드가 다 되었을 때, 창 크기가 바뀔 때, 마우스가 클릭되었을 때, 마우스 휠이 움직일 때, 화면에 터치가 이루어 졌을 때 등등이 있다. - 우리는 이러한 이벤트에 반응하여 동작을 시행하는 함수를 만들 것이다. * 이벤트 함수 // 클릭 // - 먼저 간단하게 버튼을 만들었다. 우리의 목표는 버튼을 클릭하였을 때 main-title이라는 id를 가진 h1태그의 배경색을 바꾸는 것이다. - btn이라는 변수에 클래스명을 이용하여 버튼을 담아주었다. - 다음으로 변경이 이루어지는 h1태그도 id를 이용하여 mainTitle 변수에 담아주었다. - 이제 클릭되었을 때 시행될 함수를 만들어야한다. 이 .. 이전 1 다음
