자바스크립트 이벤트 - EVENT API -

EVENT API

지금까지 DOM 이벤트에 관한 내용으로 강좌를 쭉~ 진행해 보았습니다.

이번시간에는 이제까지 학습한 내용을 바탕으로 간단한 EVENT API 코드를 작성하여 각 함수 호출 시 해당 엘리먼트의 이벤트 변화를 살펴보도록 하겠습니다.

아래는 작성된 EVENT API 예제 소스입니다.

1. var Event = (function(win, doc){
2.    
3.     var $this = null;      
4.  
5.     return new (function(){
6.        
7.         function init(){   
8.            
9.             $this = this;
10.  
11.             return this;
12.         }
13.  
14.         init.prototype = {
15.             bind: bind,
16.             unbind: unbind,
17.             stopDefault: stopDefault,
18.             stopPropagation: stopPropagation,
19.             relatedEventBind: relatedEventBind
20.         };
21.  
22.  
23.         return init;
24.  
25.     }());
26.  
27.     // 이벤트 할당
28.     function bind(elem, type, handler, capture)
29.     {    
30.         type = typeof type === 'string' && type || '';
31.         handler = handler || function(){ ; };
32.        
33.         if (elem.addEventListener){
34.             elem.addEventListener(type, handler, capture);
35.         }
36.         else if (elem.attachEvent){
37.             elem.attachEvent('on' + type, handler);
38.         }
39.  
40.         return elem;
41.     };
42.    
43.     // 이벤트 삭제
44.     function unbind(elem, type, handler)
45.     {      
46.         type = typeof type === 'string' && type || '';
47.         handler = handler || function(){ ; };
48.  
49.         if (elem.removeEventListener){         
50.             elem.removeEventListener(type, handler);
51.         }
52.         else if (elem.detachEvent){
53.             elem.detachEvent('on' + type, handler);
54.         }
55.  
56.         return elem;
57.     };
58.  
59.  
60.     // 엘리먼트의 기본동작 막기
61.     function stopDefault(e)
62.     {  
63.         e = window.event || e;
64.  
65.         if (window.event) e.returnValue = false;
66.         else if (e.preventDefault) e.preventDefault();
67.     };
68.    
69.  
70.     // 이벤트 버블링 중지
71.     function stopPropagation(e)
72.     {
73.         e = window.event || e;
74.  
75.         if (window.event) e.cancelBubble = true;
76.         else if (e.stopPropagation) e.stopPropagation();
77.     };
78.  
79.    
80.     // mouseover, mouseout 시 이벤트가 할당된 해당 엘리먼트만 호출하기
81.     function relatedEventBind(e, callback)
82.     {  
83.         var target = window.event ? e.srcElement : e.target
84.           , relatedTarget = window.event ? window.event.toElement : e.relatedTarget;
85.    
86.         callback = callback || function(){ ; };
87.  
88.         if (relatedTarget)
89.         {
90.             while (relatedTarget)
91.             {
92.                 if (relatedTarget === target) break;
93.                 relatedTarget = relatedTarget.parentNode;
94.             }
95.         }
96.  
97.         callback.call(null, target);
98.     };
99.        
100. }(window, document));

- 이벤트 할당

1. Event.bind(window, 'load', function(){
2.  
3.  
4.     var handler1 = function(e){
5.        
6.         alert('엘리먼트의 기본 동작을 막는 이벤트 할당');
7.         Event.stopDefault(e);
8.     };
9.  
10.     var handler2 = function(e){
11.         alert('기본 이벤트 할당');
12.     };
13.  
14.    
15.     Event.bind(document.getElementById('test_object1'), 'click', handler1, false);
16.  
17.     Event.bind(document.getElementById('test_object2'), 'click', handler2, false);
18.  
19.  
20. }, false);

해당 엘리먼트의 이벤트 타입에 핸들러가 아래와 같이 할당 되었습니다.

- 이벤트 할당 및 삭제

1. Event.bind(window, 'load', function(){
2.  
3.  
4.     var handler1 = function(e){
5.        
6.         alert('엘리먼트의 기본 동작을 막는 이벤트 할당');
7.         Event.stopDefault(e);
8.     };
9.  
10.     var handler2 = function(e){
11.         alert('기본 이벤트 할당');
12.     };
13.  
14.    
15.     // 이벤트 할당
16.  
17.     Event.bind(document.getElementById('test_object1'), 'click', handler1, false);
18.  
19.     Event.bind(document.getElementById('test_object2'), 'click', handler2, false);
20.    
21.     // 이벤트 삭제
22.  
23.     Event.unbind(document.getElementById('test_object1'), 'click', handler1);
24.  
25.     Event.unbind(document.getElementById('test_object2'), 'click', handler2);
26.  
27. }, false);

해당 엘리먼트의 이벤트 타입에 핸들러가 아래와 같이 삭제 되었습니다.

추가적으로 해당 엘리먼트의 이벤트 버블링을 중지 시키는 소스 입니다.

1. Event.bind(window, 'load', function(){
2.  
3.  
4.     Event.bind(document.getElementById('test_object1'), 'click', function(e){
5.         // 버블링 중지
6.         Event.stopPropagation(e);
7.     }, false);
8.  
9.  
10. }, false);