문서의 기하학적 특성( 요소의 크기와 위치, viewport, 스크롤 제어, 스크린의 크기 ), 이벤트( 이벤트 등록방법<inline, 프로퍼티 리스너, addEventListener> )
문서의 기하학적 특성
요소의 크기와 위치
- 엘리먼트의 크기와 위치를 알고 싶을때는 해당객체.getBoundingClientRect()을 이용해서 알아낼수 있다.
( ClientRect 안에는 bottom, height, left, right, top, width의 값들을 알아낼 수 있고
해당 값들은 getBoundingClientRect()의 속성을 통해서 접근할 수 있다 )
viewport
- viewport는 문서 전체가 아닌 현재 사용자에게 보여지고 있는 부분을 말한다.
- 문서의 좌표와 viewport의 좌표가 있고 이 둘은 서로 다르다.
- window 객체에 있는 window.pageYoffset 혹은 window.pageXOffset을 이용하면 스크롤의 정도를 알수가 있다.
- getBoundingClientRect()는 viewport에 대한 좌표를 이용한다.
( 문서 전체에서 해당 객체에 대한 거리를 알고 싶다면 해당객체.getBoundingClientRect().top()의 값에
window.pageYOffset 값을 서로 더해주면 나온다 )
* setInterval() 함수를 이용하면 밀리세컨드 간격으로 반복해서 실행하는것이 가능하다.
( setInterval( 실행함수, 밀리세컨드 ) 형식으로 사용이 된다. )
스크롤 제어
- window.scrollTo()를 이용하면 해당 브라우저에 대한 스크롤을 제어할 수 있다.
- window.scrollTo(이동할 x좌표의 위치, 이동할 y좌표의 위치)
스크린의 크기
- 스크린의 크기나 viewport의 크기를 알아올 수 있다.
* viewport의 크기
window.innerWidth, window.innerHeight
* 모니터(스크린)의 크기
screen.width, screen.height
이벤트
- 어떠한 사건이 일어났을때 자바스크립트 코드를 실행하도록 하는 것
( 예를 들어서 사용자가 버튼을 클릭했을'때', 텍스트박스의 내용이 변경 됬을'때' 등... )
- event target은 이벤트가 일어날 객체를 의미한다. ( 버튼 태그의 객체와 같은.. )
- event type은 이벤트의 종류를 의미한다. ( click, mousemove, scroll, ... )
- event handler는 이벤트가 발생했을때 동작하는 코드를 의미한다.
( 예를 들어서 버튼 클릭시에 발생하는 alert(window.location)과 같은 코드를 말한다 )
( 예를 들어서 이런식으로 사용자가 해당 버튼을 클릭하면 경고창이 뜨는 이벤트가 발생하게 된다 )
이벤트 등록방법
- 이벤트 등록방법에는 3가지 방법이 있다.
1. inline
- 태그안에 직접 이벤트를 기술하는 방식을 인라인 방식이라고 한다.
- inline 방식을 사용할때는 해당 객체를 가르키는 this를 이용해서도 이벤트를 기술해줄 수 있다.
( this를 이용하면 각 객체마다 쉽게 inline 이벤트를 사용할 수 있다 )
- 장점은 해당 태그에 대한 이벤트가 직접 기술 되어있어서 쉽게 찾을수 있고
단점은 정보(html)와 제어(javascript)가 서로 섞여있어 정보로써의 가치가 저하된다고 볼 수 있다.
그리고 복잡한 코드 또한 해당 태그 안에 넣기가 힘들다.
2. 프로퍼티 리스너
- 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
- inline 방식에 비해서 HTML과 JavasScript를 분리하는 방식이다.
- 이벤트가 실행된 맥락의 정보가 필요할때는 이벤트 객체를 사용한다.
이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
( IE 8이하의 버전에서는 이벤트 객체를 인자로 받지 않고 내부에서 전역객체인 window.target을 이용한다 )
- 또한 target 프로퍼티도 지원하지 않아서 그 대신에 srcElement를 사용해준다.
( 이러한 웹브라우저마다의 차이점은 라이브러리가 해결 해주기 때문에 라이브러리를 직접 제작할게 아니라면
크게 신경 쓰지 않아도 되는 부분이다. )
( 프로퍼티 방식을 이용하면 inline 방식의 단점인 정보로써의 가치를
HTML과 JavaScript를 나눔으로 인해서 올려 줄 수 있다 )
( 이벤트가 실행된 맥락의 정보가 필요하다면 event를 이벤트 핸들러의 인자로 넘겨줘서 사용한다 )
( IE8 이하 버전에서는 event 인자를 넘기는 방식과 target을 사용할 수 없으므로
위에 나와있는 다른 방법으로 대체를 해줘야한다... )
3. addEventListener()
- 이벤트를 등록할때 가장 권장되는 방식으로 이 방식을 이용하면 여러개의 이벤트를 등록할 수 있다.
( 어떤 방법을 사용해도 상관은 없지만 가장 권장이 되는 방식 )
- 이 방식은 IE8 이하의 버전에서는 호환이 되지 않는다.
( 해당 버전에서는 attachEvent()를 이용한다 )
- 이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 재등록 할 수 있다.
- 이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.
( 프로퍼티 리스너 방식과 비교해보면 그 장점을 더 명확하게 알 수 있다 )
( addEventLister() 방식이 제일 권장이 되는 방식이라고는 하지만 상황에 따라서 어떤걸 쓰던지는 자유이다.. )
( 복수의 엘리먼트에 하나의 리스너를 재등록해 리스너를 재활용 할수가 있다... )
( 하나의 리스너와 switch문을 이용해서 리스너의 재활용이 가능하다 )
( addEventListener()의 중요한 장점인 하나의 이벤트 대상에 복수의 동일 이벤트 타입
리스너를 등록할 수 있다는 점이다...
즉, 하나의 타겟에 여러개의 이벤트를 등록 시켜 연속적으로 실행도 가능하다는 얘기다.. )
( 1 경고창이 떳을때 확인을 누르자마자 바로 2라는 내용의 경고창이 뜨게 되는걸 보고
하나의 이벤트 대상에 복수의 동일 이벤트 타입 실행이 가능하다는걸 알 수 있다.. )
댓글