이벤트타입
이벤트 타입이라는 것은 이벤트의 종류
-폼(submit, change, blur, focus)
*submit : 폼의 정보를 서버로 전송하는 명령
*change : 폼 컨트롤의 값이 변경되었을 때 사용
*blur, focus : focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트
-문서 로딩
console.log(t); // null 을 출력, 스크립트 호출 시 id가 ‘target’이 존재하지 않기 때문
<head>
<script>
window.addEventListener('load', function(){ //
var t = document.getElementById('target');
console.log(t); // p#target
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행되기 때문에 앱의 구동이 지연되는 부작용이 초래할 수 있습니다.
DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없습니다.
실제 라이브러리 사용으로 내부적으로 알아서 채택합니다. 이벤트 타입 때문에 고민하는 경우가 없습니다. 하지만 둘의 차이는 아는 것이 중요합니다.
-마우스
Click : 클릭했을 때 발생하는 이벤트 Dblclick : 더블클릭을 했을 때 발생하는 이벤트
Mousedown : 마우스를 누를 때 발생 Mouseup : 마우스버튼을 땔 때 발생
Mousemove : 마우스를 움직일 때 Mouseover : 마우스가 엘리먼트에 진입할 때 발생
Mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 Contextmenu : 컨텍스트 메뉴가 실행될 때 발생
키보드 조합
event.shiftKey, event.altKey, event.ctrlKey
마우스 포인터 위치 : 이벤트 객체의 clientX와 clientY를 사용
jQuery이벤트(jQuery와 none jQuery의 비교)
jQuery를 사용하지 않았을 경우의 코드 분량에 차이가 있습니다.
또한, jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 합니다. 이러한 이유로 jQuery와 같은 라이브러리를 사용합니다.
-on API 사용법(On은 jQuery에서 가장 중요한 API)
selector 인자
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('ul').on('click','a, li', function(event){
console.log(this.tagName); // A LI
})
</script>
두 번째 인자에 ‘a li’ 태그를 필터링 했기 때문에 ul태그에 대한 이벤트가 발생하는 것이 아님
Late binding(존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 기능)
다중 바인딩(하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법)
이벤트 제거(off를 사용)
<input type="text" id="target"></textarea>
<input id="remove" type="button" value="remove" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var handler = function(e){
$('#status').text(e.type+Math.random());
};
$('#target').on('focus blur', handler) // focus이벤트만 삭제
$(‘#target’).on(‘focus’, function(e){
alert(1);
)
$('#remove').on('click' , function(e){
$('#target').off('focus', handler);
})
</script>
네트워크통신
자바스크립트를 이용해서 웹브라우저의 통신 기능
Ajax(페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 것)
Asynchronous JavaScript And XML : 비동기적 자바스크립트와 XML
비동기적으로 자바스크립트를 이용해 서버와 통신하는 방법
if(통신완료 && 통신성공) = if(xhr.readyState && xhr.status)
POST방식
JSON(서버와 클라이언트 간의 데이터를 주고 받는 형식)
JavaScript Object Notation : 자바스크립트에서 객체를 만들 때 사용하는 표현식
JSON API
*JSON.parse() : 인자로 전달된 문자열을 자바스크립트의 데이터로 변환
*JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환
Ajax와 JSON
Json은 모든 언어에서 객체와 배열로 사용할 수 있는 특징이 있음
JSON의 적용
var tzs = JSON.parse(_tzs); //자바스크립트의 데이터로 변환
jQueryAjax
브라우저간의 차이(크로스 브라우징)를 jQuery가 알아서 해결합니다.
http://api.jquery.com/category/ajax/
data : 서버로 데이터를 전송할 때 이 옵션을 사용
dataType : 서버 측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정, 값으로 올 수 있는 것은 xml, json, script, html으로 형식을 지정하지 않으면 jQuery가 알아서 판단합니다.
success : 성공했을 때 호출할 콜백을 지정, Function( PlainObject data, String textStatus, jqXHR jqXHR )
type : 데이터를 전송하는 방법을 지정, get, post를 사용
serialize() : select, texarea, text, checkbox 등의 값을 리턴
JSON처리방식
출처 : 생활코딩 강의
'프로그래밍 > JavaScript' 카테고리의 다른 글
| WEB2 - JavaScript : 제어할 태그 선택하기 ~ 배열과 반복문의 활용 (0) | 2017.12.15 |
|---|---|
| WEB2 - JavaScript : HTML과 JavaScript만남~ CSS기초 (0) | 2017.12.09 |
| 웹 브라우저 자바스크립트 : 이벤트(Event) (0) | 2017.11.30 |
| 웹 브라우저 자바스크립트 : document, text 객체, 문서의 기하하적 특성 (2) | 2017.11.29 |
| 웹 브라우저 자바스크립트 : DOM(Document Object Model)2 (1) | 2017.11.28 |