1. 이벤트 종류
- 마우스 이벤트
- 키보드 이벤트
- HTML 프레임 이벤트
- HTML 입력양식 이벤트
- 유저 인터페이스 이벤트
- 구조 변화 이벤트
- 터치 이벤트
2. 이벤트 용어
<script>
window.onload = function() {
}
</script>
load : 이벤트 이름, 이벤트 타입
onload : 이벤트 속성
이벤트 핸들러 : 이벤트 속성에 할당된 함수
3. 이벤트 모델
- 문서객체에 이벤트를 연결하는 방법
- DOM Level0 : 고전 이벤트 모델, 인라인 이벤트 모델
- DOM Level2 : ms인터넷 익스플로러 이벤트 모델, 표준 이벤트 모델
1) 고전 이벤트 모델
- 이벤트 하나에 이벤트 핸들러 하나만 연결
- 이벤트 핸들러 제거는 문서객체의 이벤트 속성에 null을 넣어준다.
예)
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//변수선언
var header = document.getElementById('header');
//이벤트를 연결한다.
function whenClick(){
alert('click!!');
//이벤트 제거
header.onclick = null;
}
header.onclick = whenClick;
};
</script>
</head>
<body>
<h1 id="header">when Click...</h1>
</body>
</html>
- 이벤트 제거 시 한번 클릭하고 다음 클릭시에는 발생하지 않음.
예) 이벤트 발생 객체
: this 는 발생 객체
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
document.getElementById('header').onclick = function(){
alert(this);
}
};
</script>
</head>
<body>
<h1 id="header">when Click...</h1>
</body>
</html>
객체의 style을 바꿔보면 글자색이 바뀐다.
window.onload = function(){
document.getElementById('header').onclick = function(){
this.style.color = 'blue';
}
};
** 이벤트 강제 발생
예) 버튼을 클릭하면 숫자가 증가한다.
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
var buttonA = document.getElementById('a');
var buttonB = document.getElementById('b');
var counter_a = document.getElementById('btn_a_cnt');
var counter_b = document.getElementById('btn_b_cnt');
buttonA.onclick = function(){
counter_a.innerHTML = Number(counter_a.innerHTML) + 1;
}
buttonB.onclick = function(){
counter_b.innerHTML = Number(counter_b.innerHTML) + 1;
}
};
</script>
</head>
<body>
<button id="a">A</button>
<button id="b">B</button>
<h1 id="btn_a">Button A is <span id="btn_a_cnt">0</span></h1>
<h1 id="btn_b">Button B is <span id="btn_b_cnt">0</span></h1>
</body>
</html>
버튼 a를 클릭하면 b도 중가 하게 할려면
buttonA.onclick = function(){
counter_a.innerHTML = Number(counter_a.innerHTML) + 1;
buttonB.onclick();
}
하면 된다.
2) 인라인 이벤트 모델
-
<body>
<h1 onclick="alert('click!')">Click</h1>
</body>
- 인라인 모델 함수 호출
<script>
function aClick(e){
alert('click!');
}
</script>
<body>
<h1 onclick="aClick(event)">Click</h1>
</body>
3) 인터넷 익스플로러 이벤트 모델
- 인라인 이벤트 모델, 고전이벤트 모델은 한번에 하나의 이벤트핸들러만 가짐.
- 보완하기 위한 DOM Level2 모델
여러 번 이벤트를 추가할수 있다.
- attachEvent( eventProperty, eventHandler);
detachEvent( eventProperty, eventHandler);
window.attach( 'onload', function(){
});
예) 익스플로러에서 실행해보면 (다른 브라우저는 안됨)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.attachEvent('onload',function(){
var haeder = document.getElementById('header');
//이벤트 연결
header.attachEvent('onclick',function(){
alert('click1');
});
header.attachEvent('onclick',function(){
alert('click2');
});
header.attachEvent('onclick',function(){
alert('click3');
});
});
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
</html>
; 한번 클릭했는데 경고창이 3번 뜬다.
** 이벤트 제거
제거 할때는 정확한 이벤트 핸들러 명을 명시해야 제거가 된다.
<script>
window.onload = funciton(){
var header = document.getElementById('header');
// 핸들러 생성
var handler = function(){ alert('click') };
//이벤트 연결
header.attachEvent('onclick', handler );
//이벤트 제거
header.detachEvent('onclick',handler );
};
</script>
; 인터넷 익스플로러 이벤트 모델에서 이벤트 핸들러의 this는 발생객체를 의미하지 않고, window객체를 의미한다.
이벤트 발생객체를 사용할려면 srcElement속성을 사용해야 한다.
window.event.srcElement.style.color ='red';
이런싟으로.
4) 표준이벤트 모델
- 익스플로러 이외의 브라우저에서 한번에 여러 이벤트 핸들러 추가할때
- 익스플로러 9버전부터는 지원함.
-
addEventListener( eventName, handler, useCapture ) : 입력하지 않으면 자동으로false
removeEventListener( eventName, handler )
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
var header = document.getElementById('header');
header.addEventListener('click', function(){
this.innerHTML += '+';
});
}
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
</html>
;
- 인터넷 익스플로러 이벤트 모델과 차이점은 event명, 발생객체를 this를 사용한것
- 그러나 ie9부터 지원하므로 ..
사용예)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
var header = document.getElementById('header');
if(header.attachEvent){
//익스플로러 이면
//이벤트 핸들러 생성
var handler = function(){
//속성변경
window.event.srcElement.style.color = 'red';
//이벤트 제거
window.event.srcElement.detachEvent('onclick', handler);
};
// 이벤트 연결
header.attachEvent('onclick', handler);
}else{
//그외 브라우저
var handler = function(){
this.style.color ='red';
this.removeEventListener('click',handler);
}
header.addEventListener('click', handler);
}
}
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
</html>
; 클릭하면 색이 변경되고 이벤트가 제거된다.
'WEB > Javascript' 카테고리의 다른 글
| 15. 이벤트 발생/ 제거 (0) | 2013.04.17 |
|---|---|
| 13.DOM - 문서객체 스타일 조작 및 제거 (0) | 2013.04.16 |
| 12. DOM - 문서 객체 가져오기 (0) | 2013.04.16 |
| 11. DOM - 객체생성 (0) | 2013.04.15 |
| 10.브라우저 객체 모델과 html페이지 실행순서 (0) | 2013.04.15 |