캡처 단계
웹 브라우저에서 이벤트가 발생하고, 문서의 최상위 객체인 Document 객체에서 이벤트가 발생한 타겟 객체의 상위 객체까지 이벤트가 전파되는 단계
타겟 단계
이벤트가 발생한 객체로 전파되는 단계
버블링 단계
타겟 객체의 상위 객체에서 다시 최상위 객체인 Document 객체까지 전파되는 단계
아래의 예제를 보면
outer 객체와 inner객체에 click 리스너가 설정되어 있다
inner를 클릭했을경우
Document 에서 타겟객체인 inner까지 캡쳐단계,타겟단계를 거쳐 이벤트가 발생하고,
다시 상위로 버블링 된다.
이때 outer에도 click 리스너가 설정되어 있기때문에 실행이 된다.
아래의 방법으로 버블링을 막을수 있다.
// 이벤트 버블링 억제 함수
function cancleBubbling(e){
if(e.stopPropagation){//ff, crome..
e.stopPropagation();
}else{//ie 6,7,8
window.event.cancleBubble = true;
}
}
function outerFunc(){
var result = document.getElementById('result');
result.innerHTML = 'outer 에서 click 이벤트 발생';
}
function innerFunc(e){
var result = document.getElementById('result');
result.innerHTML = 'inner 에서 click 이벤트 발생';
cancleBubbling(e);
}
function init(){
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
addListener(outer, 'click', outerFunc);
addListener(inner, 'click', innerFunc);
}
function addListener(el, ev, handler){
if(el.addEventListener){
el.addEventListener(ev, handler, false);
}else{
el.attachEvent('on' + ev, handler);
}
}
addListener(window, 'load', init);
외부영역을
내부 영역을 클릭해 보세요
클릭해 보세요!!
...
load 이벤트
HTML 문서가 파싱이 되고, 외부컨텐츠 로딩이 완료되면 발생
htmlElement.이벤트핸들러프로퍼티명 = = function(){
//수행문장
};
window.onload = function(){
//수행문장
};
JSON
JSON은 자바스크립트에서 객체를 텍스트로 표현하는 방식.
JSON은 시스템 간의 데이터 교환의 수단으로 사용되고 있는 XML보다
용량이 작고, 파싱에 걸리는 시간이 절약되는 이유로 시스템 간의 데이터 교환에 많이 사용되고 있으며,
웹 환경에 최적화되어 있는 자바스크립트에서
바로 객체화해 사용할 수 있기 때문에 생산성과 편의성 또한 높음.
JSON은 숫자, 문자열, 불리언, 배열, 긱체를 표현할수 있음.
// JSON
var orderJSON = '{"name":"정도전","address":"서울시 종로구","jobs":[{"name":"조립", "pay":100},{"name":"분해", "pay":200}],"man":true}';
var order = JSON.parse(orderJSON);
console.log('order.name: ' + order.name);
console.log('order.address: ' + order.address);
for(var i=0; i < order.jobs.length; i++){
for(prop in order.jobs[i]){
console.log(prop + ': ' + order.jobs[i][prop]);
}
}
console.log('order.man: ' + order.man);
/*
order.name: 정도전
order.address: 서울시 종로구
name: 조립
pay: 100
name: 분해
pay: 200
order.man: true
* */
Date
Date 객체는 리터럴 표현이 존재하지 않으며, new 연산자와 생성자 호출을 통해
객체를 생성해야함.
Date 객체는 1970년 1월 1일 0시 0분 0초를 기준으로 시간을 관리하며,(epoch time)
Date 객체의 월 지정값을 0~11임
var d = new Date();
document.writeln(d);//Fri Jan 17 2014 13:17:32 GMT+0900 0 2014
document.writeln(d.getFullYear());//2014 년
document.writeln(d.getMonth());//1 월 0~11임(0 :1월, 11:12월)
document.writeln(d.getDate());//17 일
document.writeln(d.getDay());//요일(0:일요일 ~ 6:토요일)
var d = new Date('2013/12/10');
var d = new Date(2012, 11, 10, 22, 10, 33, 500);
