DOM LEVEL2 이벤트 모델에서는 DOM LEVEL0이벤트에서와는 달리 여러 번 이벤트를 추가가 가능하다는 점입니다.
인터넷 익스플로러에서는 attachEvent 로 이벤트를 추가하고 detachEvent로 이벤트를 삭제하고
그 외 브라우저에서는 addEventListener로 이벤트를 추가하고 removeEventListener로 이벤트를 삭제합니다.
예제 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
var header = document.getElementById('my-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="my-header">Click</h1>
</body>
</html>
실행화면
클릭하면 빨간색으로 변한다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 함수 유효범위와 클로저 (0) | 2015.01.22 |
|---|---|
| Javascript - 연산자, 제어문, 예외처리 (0) | 2015.01.21 |
| Javascript - 변수, 데이터 타입, 리터럴 (0) | 2015.01.21 |
| 자바스크립트 - EJS 형식에서 forEach문 의미 및 사용법 (0) | 2015.01.06 |
| 자바스크립트 - for...in 문 (0) | 2015.01.06 |
| 자바스크립트 - 이벤트 버블링과 버블링 막는 방법 (0) | 2014.09.07 |
| 자바스크립트 - 문서객체를 이용한 글자 움직이기 예제 (0) | 2014.09.06 |
| 자바스크립트 - 문서객체(DOM)을 사용한 움직임 구현 (0) | 2014.09.06 |