Javascript : Event

 var h = document.getElementById('h');
    h.onclick = function(){
        alert('클릭');
        //이벤트 제거
        h.onclick = null;
    };

 

document.getElementById('h').onclick = function(){
        //이벤트 핸들러 안에서 this 사용시 이벤트가 발생한 객체를 리턴
        alert(this);
    };

 

//이벤트핸들러에서 return false로 기본 이벤트를 제거 할 수 있음

document.getElementById('my_form').onsubmit = function(){

return false;

}

 

//인라인모델에서는 return 함수를 입력.

<form onsubmit = "return customSubmit()"></form>

 

* 이벤트 버블링 : 자식 -> 부모

   이벤트 캡쳐링 : 부모 -> 자식

 

    document.getElementById('h').onclick = function(){
         alert('h');  
    }
    document.getElementById('a').onclick = function(e){
        var event = e || window.event;
       
        alert('a');
       
        event.cancelBubble = true;
        if(event.stopPropagation){
            event.stopPropagation();
        }
    }

 

익스플로러의 경우 cancelBubble() 기타 브라우저의 경우 stopPropagation() 으로 이벤트 버블링 해제.

h 안에 a 가 포함되어 있어 버블링이 일어나는데 위와같이 막을 수 있음.

 

* 브라우저 구분할 때, 윈도우 익스플로러에만 존재하는 attachEvent / 익스플로러에만 존재하지 않는 addEventListener 메서드로 구분이 가능함.

 

    function registerEventListener(node, event, listener){
        //크롬, 사파리 등
        if(node.addEventListener){
            node.addEventListener(event, listener, false);
        }//윈도우 익스플로러
        else if(node.attachEvent){
            node.attachEvent('on' + event, listener);
        }
    };