javascript 에서의 이벤트 관리 방법들

* 이벤트 버블링 

 html에서  이벤트는 자식에서부터 부모로의 순서로 실행된다. 아래의 코드에서는 "클릭 span"을 클릭 하면, 총 3번의 alert이 뜨게 되는데, 순서는 span -> p -> div 입니다. 이것이 바로 이벤트의 버블링 입니다.

<div onClick={window.alert('div')>
    <p onClick={window.alert('p')>
        <span onClick={window.alert('span')}>
             클릭 span
        </span>
    </p>
</div>

 ** 버블링 중단하기

중단하고 싶은 곳에서 event.stopPropagation() 을 호출하면 된다.

 * 기본적으로 버블링을 중단하는 것은 권장하지 않습니다.

<div onClick={window.alert('div')}>
    <p onClick={window.alert('p'); window.alert("이벤트는 여기까지 오지 못함.")}>
        <span onClick={window.alert('span'); event.stopPropagation()}>
             클릭 span
        </span>
    </p>
</div>

* 이벤트 캡처링

 이벤트 버블링과 정확히 반대로, 이벤트가 부모에서 자식으로 전파되는 상황을 말한다. 

 일반적인 경우에서는 일어나지 않지만, 특정한 경우에 사용 할 수는 있다.

 winodw.addEventListner(event,handler,true)의 형태로 사용 가능합니다. 3번째 인자는 캡처링의 작동 유무를 나타냅니다 .

 

*** 이벤트의 실행 순서

 캡처링 이벤트 -> 타깃 이벤트 -> 버블링 이벤트 의 순으로 실행 됨

* 이벤트 등록

 window.addEventListner, document.addEventListner

** 이벤트 해체

 window.removeEventListner, document.removeEventListner 

 * 이벤트를 적절히 해제 하지 않으면 성능저하 우려

 

*이벤트 위임

 캡처링과 버블링을 이용해서 부모단에서 자식들에 일어나는 이벤트를 핸들링 할 수 있습니다.