노력형 개발자

ready

 - 발생시점 

  ready() 메소드에 전달되는 이벤트 핸들러 함수의 호출 시점은 DOM구조가 로딩 완료될때(1,2번 사이)

HTML 문서는 가장 먼저 

1. DOM 구조가 로딩되고

2. 이어서 이미지와 같은 요소 컨텐츠들이 로딩

3. 이후 Window 객체가 로딩되고

4. 웹브라우저에서 Window 객체의 load이벤트가 발생 

* load 이벤트  - HTML 문서가 파싱이 되고, 외부컨텐츠 로딩이 완료되면 발생

preventDefault

이벤트 디폴트 동작 제어

a태그 클릭시 a태그의 기본동작인 구글로 이동을 제어하고 alert을 실행시킴

이동

캡처 단계

웹 브라우저에서 이벤트가 발생하고, 문서의 최상위 객체인 Document 객체에서 이벤트가 발생한 타겟 객체의 상위 객체까지 이벤트가 전파되는 단계

타겟 단계

이벤트가 발생한 객체로 전파되는 단계

버블링 단계

타겟 객체의 상위 객체에서 다시 최상위 객체인 Document 객체까지 전파되는 단계

아래의 예제를 보면

outer 객체와 inner객체에 click 리스너가 설정되어 있다

inner를 클릭했을경우

Document 에서 타겟객체인 inner까지 캡쳐단계,타겟단계를 거쳐 이벤트가 발생하고,

다시 상위로 버블링 된다.

이때 outer에도 click 리스너가 설정되어 있기때문에 실행이 된다.

아래의 방법으로 버블링을 막을수 있다.

// 이벤트 버블링 억제 함수
function cancleBubbling(e){
    if(e.stopPropagation){//ff, crome..
        e.stopPropagation();
    }else{//ie 6,7,8
        window.event.cancleBubble = true;
    }
}

function outerFunc(){
    var result = document.getElementById('result');
    result.innerHTML = 'outer 에서 click 이벤트 발생';
}

function innerFunc(e){
    var result = document.getElementById('result');
    result.innerHTML = 'inner 에서 click 이벤트 발생';
   cancleBubbling(e);
}

function init(){
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');

    addListener(outer, 'click', outerFunc);
    addListener(inner, 'click', innerFunc);
}

function addListener(el, ev, handler){
    if(el.addEventListener){
        el.addEventListener(ev, handler, false);
    }else{
        el.attachEvent('on' + ev, handler);
    }
}

addListener(window, 'load', init);


		

	외부영역을
    

    	내부 영역을 클릭해 보세요
    
    클릭해 보세요!!

...

load 이벤트

HTML 문서가 파싱이 되고, 외부컨텐츠 로딩이 완료되면 발생

htmlElement.이벤트핸들러프로퍼티명 =  = function(){
    //수행문장
};

window.onload = function(){
    //수행문장
};