Knowledge Map
addEventListener, 미디어쿼리 본문
출처 : http://dimdim.tistory.com/entry/javascript%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-addEventListener-%ED%95%A8%EC%88%98-%EC%84%A4%EB%AA%85
javascript에서 addEventListener 함수를 이용하여 DOM Element에 이벤트 처리 함수를 추가할때 Capturing 과 Bubbling 두가지의 전달방식을 선택할 수 있다.
1. Capturing
- Capturing은 이벤트가 발생한 target element의 최상위 부모부터 target element까지 순차적으로 내려오면서 이벤트가 전달되는 방식 (TopDown 방식?)
2. Bubbling
- Bubbling은 이벤트가 발생한 target element부터 최상위 부모까지 순차적으로 올라가면서 이벤트가 전달되는 방식 (BottomUp 방식?)
- 이벤트 처리 함수의 매개변수인 Event객체의 event.stopPropagation()함수를 이용해 부모 노드로 이벤트가 전달되지 않도록 막을 수 있다.
* Event객체의 event.preventDefault() 함수는 기본 이벤트 핸들러의 동작을 막는다. 주로 Anchor(<a> Tag) Element의 페이지 이동을 막기 위해 사용된다.
3. addEventListener 함수 정의
target.addEventListener(type, listener[, useCapture]);
type이벤트 타입을 구분하기 위한 문자열 (ex click, blur, drag, drop, ...)listener이벤트를 수신하여 처리할 객체, 해당 객체는 EventListener 인테페이스를 구현하거나 단순한 자바스크립트 함수여야 한다.useCapture Optionaltrue 이면, Capturing 방식으로 이벤트가 전달되며, false 이며, Bubling 방식으로 이벤트가 전달된다. 기본값은 false이다.=======================================================================================================
미디어쿼리, 모바일 화면 디자인 관련
@media only screen and (max-width:480px){
/* 작은 화면 디자인과 관련된 작업을 수행 */
}
하지만 이걸 쓴다고 해서 폰에서 미디어쿼리가 아직까지는 동작하지 않는다는 사실을 알게된다.
처음에 페이지가 확대된 상태로 나타나게 하고 미디어쿼리가 기대한 대로 동작하게 만들려면 HTML의 meta 엘리먼트를 문서의 <head>에 추가해야 한다.
<meta name="viewport" content="width=device-with, initial-scale=1">
'WEB' 카테고리의 다른 글
| UDP (0) | 2016.03.08 |
|---|---|
| AngularJS UnitTest - Karma (0) | 2016.03.06 |
| AngularJS에서 carousel 적용하기 (0) | 2016.02.24 |
| 20160223 (0) | 2016.02.23 |
| 메타(Meta) 태그 (0) | 2016.02.22 |
