프로젝트 진행중
미디어쿼리로 PC버전을 선언하고, TABLET 버전 미디어쿼리를 상속받고
MOBILE 버전을 별도로 선언했던 적이 있다.
이유는 모바일에서 달라지는 UI에서 기존 PC or Tablet 버전의 css를 상속받게 되면 초기화 해줘야 할 것들이 너무 많기 때문에 이렇게 진행했었다. 장단점이 있다.
마우스 호버시, css3 Animation 을 구현하는 css를 만들었는데 ie에서 동작하지 않는 문제가 있었다. ( 엣지에서는 되는데.. )
이를 해결하기 위해서는 미디어 쿼리 밖에 @keyframe 을 선언해 줘야 한다.
목차
1. 자바스크립트 이벤트 란
2. 이벤트 종류
3. 이벤트 설정 ( 등록, 삭제, 트리거, 핸들러 )
4. 이벤트 구현 샘플
5. 커스텀 이벤트 구현
1. 자바스크립트 이벤트 란
mouseover, mouseout, click, mousetouch 등.. 어떤 사건이 일어난 경우를 이벤트(event)라 한다.
|
1
2
3
4
5
6
7
8
|
var btn = document.querySelector("#box");
btn.addEventListener("click", function() {
console.log("click!");
});
btn.addEventListener("mouseover", function() {
console.log("click!");
});
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
기타 등등... 이벤트에는 다양한 이벤트가 있다.
2. 이벤트 종류
1. 기본 이벤트 ( a태그, button 태그 등.. 네이티브 속성을 가진 태그 )
2. 키보드 이벤트
3, 마우스 이벤트
4. 드레그 이벤트
5. 폼(form), 도큐멘트(document), 윈도우(window) 이벤트
- resize, onLoad 등등...
3. 이벤트 설정 ( 등록, 삭제, 트리거, 핸들러 )
3-1 등록
- inline
|
1
|
<button type="button" onClick="alert('hello!')"></button>
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
*layerPopup 에서 자주 볼 수 있다.
- property listener
|
1
2
3
4
5
6
|
var btn = document.querySelector("button");
btn.addEventListener('click', function(){
console.log('btn Click!');
})
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
* html 과 javascript를 분리하여 사용하는 일반적인 방식.
onclick() 같은 함수를 사용해도 되지만 addEventListener 를 사용할 경우 여러 종류를 이벤트를 등록 할 수 있다.
3-2 삭제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var btn1 = document.querySelector("#btn1");
var cnt = 0;
btn1.addEventListener('mouseover', function(){
cnt ++;
if(cnt >= 10) {
console.log('remove!');
btn1.removeEventListener('mouseover');
}
console.log(cnt);
})
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
*마우스오버시 cnt의 숫자가 증가하다 10보다 크거나 같으면 이벤트를 삭제
3-3 트리거
https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events
이벤트 생성 및 트리거
이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 인공 이벤트(synthetic events)라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.
developer.mozilla.org
이미지를 어떤 비율로 보여주고 싶을 때, 이미지 리사이징 하는 계산 공식.
var $el = element;
var windowWidth = $(window).width();
var widthRatio = 1.95;
var heightRatio = 1;
var vdHeight = parseInt((windowWidth / widthRatio) *
$el.find('.db_img').css({'height':vdHeight});
1.95 : 1 비율 예시
| 유투브 동영상 초기화 (0) | 2018.08.16 |
|---|