본문 바로가기
프로그래밍 공부/JavaScript

JavaScript - DOM Level 2 이벤트 모델

신입사원 최종원 2019. 12. 20. 16:50

DOM Level 0의 기본 이벤트 모델과 인라인 이벤트 모델은 한계가 있다. 아래는 지금까지 공부한 DOM Level 0 이벤트 모델과 지금 보려고하는 DOM Level 2 이벤트 모델을 정리한 것이다.

DOM Level 이벤트 모델 종류 리스너(핸들러) 처리 갯수 기타
DOM Level 0 고전 이벤트 모델(기본 이벤트 모델) 1  
인라인 이벤트 모델 1  
DOM Level 2 IE(인터넷 익스프롤러) 이벤트 모델 다중처리 가능 IE11부터 지원 안함
W3C(표준) 이벤트 모델 다중처리 가능  
고전 이벤트 모델 인라인 이벤트 모델
자바스크립트에서 문서 객체의 Event Property을 사용해 Event와 Event Handler를 연결하는 방식이다. HTML 태그의 Event Property와 Event Handler를 연결하는 방식이다.
단점 : Event Handler를 1개 밖에 처리 못한다. 기본적으로 Event와 Event Handler를 연결하기 위해서 window.onload와 Event Handler 안에서 코드를 작성해야 웹 페이지가 로드될 때 Event와 Event Handler가 연결이 된다. 단점 : Event Handlert를 1개밖에 처리 못하고, 코드가 지저분해지고, 유지 보수가 힘들어질 수 있다.

<body>
<script>
     window.onload=function(){
          let button = document.getElementById('button');
         
          button.onclick=function(){
               let message = '기본 이벤트 모델';
               alert(message);
          }
     }    
</script>
 <button id="button">
기본 이벤트 모델
</button>
</body>

 <body>
<button onclick="let message='인라인 이벤트 모델'; alert(message);">
인라인 이벤트 모델
</button>
</body>
IE(인터넷 익스프롤러) 이벤트 모델 W3C(표준) 이벤트 모델
인터넷 익스프롤러에서 제공하는 Event Handler 추가 함수를 사용해서 Event와 Event Handler를 연결하는 방식이다. W3C에서 제공하는 웹 표준을 이용해 Event와 Event Handler를 연결하는 방식이다.
DOM Level 2 이벤트 모델인 IE 이벤트 모델과 W3C 이벤트 모델은 여러개의 Event Handler를 처리할 수 있다.
단점 : IE(인터넷 익스프롤러)11 버전부터 지원하지 않는다. 단점 : 그런거 없다.
이벤트 추가 메서드 : 
attachEvent('Event Property', Event Handler)

이벤트 제거 메서드 : 
detachEvent('Event Property', Event Handler)		 이벤트 추가 메서드 : 
addEventListener('Event Name', Event Handler, useCaptuer)

이벤트 제거 메서드 : 
removeEventListener('Event Name', Event Handler)
현재 2019년에는 IE(인터넷 익스프롤러)의 업그레이드 브라우저인 마이크로소프트 Edge(엣지) 브라우저, 크롬 브라우저나 파이어폭스 브라우저를 사용하기 때문에 더 이상 사용하지 않는다. 기본적으로 Event와 Event Handler를 연결하기 위해서 window.onload와 Event Handler 안에서 코드를 작성해야 웹 페이지가 로드될 때 Event와 Event Handler가 연결이 된다.

정리한 표에도 나와있듯이 Windows 10을 기준으로 IE(인터넷 익스프롤러)는 Edge(엣지) 브라우저로 교체가 되었기 때문에 IE(인터넷 익스프롤러) 이벤트 모델은 사용하지 않는다. 그리고 상기한 이벤트 모델은 버블링(bubbling)은 사용할 수 있지만 캡처링(capturing)은 사용하지 못한다. W3C에서 제공한 표준 이벤트 모델은 모든 기능을 수행할 수 있고,  캡처링 기능까지 제공한다.

addEventListener('Event Name', Event Handler, useCapture)의 매개변수중에 useCapture가 그것인데 입력하지 않는다면 기본값은 false로 적용되기 때문에 사용해야 하는 경우가 아니면 적지 않아도 문제가 없다. 

<body>
     <h1 id="header">Click</h1>
     <script>
          window.onload=function(){
               let header=document.getElementById('header');

               // 클릭시 +를 추가하는 이벤트 함수를 선언
               let addplus=function(){
                    this.innerHTML+='+';
               }

               // addEventListener를 이용해서 addplus 이벤트 함수를 연결
               header.addEventListener('click', addplus);

               // removeEventListener를 이용해서 addplus 이벤트 함수를 제거
               header.removeEventListener('click', addplus);
          }
</script>
</body>

DOM Level 2 이벤트 모델.html
0.00MB

 

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

JavaScript - 우클릭 방지, 키보드의 특정 키 방지  (0) 2019.12.23
JavaScript - 예외 처리  (0) 2019.12.23
JavaScript - 인라인 이벤트 모델, 디폴트 이벤트 제거, 이벤트 전달  (0) 2019.12.20
JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행  (0) 2019.12.19
JavaScript - 고전 이벤트 모델(기본 이벤트 모델)  (0) 2019.12.19

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바