JuNote

            onclick, ondblclick, 등의 html 속성에 javascript 함수를 정의하여 작동시키는 방법.

            <input type="button" onclick="이런식();">

            DOM의 객체인 window의 onload를 사용하여 등록하는 방법.

            

            ex) 

                        

            

        

        target.addEventListener(type, listener, useCapture);

        

        target : 보통은 등록할 DOM 노드, Element, Document, Window, XmlHttpReqeust와 같이 이벤트를 지원하는 모든 객체

        type : 이벤트 유형 문자열 ( "click", "mouseup"..... )  https://developer.mozilla.org/ko/docs/Web/Events

        listener : 처리 담당 함수

        useCapture : 이벤트 단계 ( default : false )

            target.removeEventListener(type, listener, useCapture);

1의 경우, HTML/JS가 섞여 가독성이 떨어짐. 특정 요소의 특정 이벤트(input button의 onclick에 단 하나의 이벤트)만 등록할 수 있는 단점이 있고, 그 요소에 똑같은 이벤트를 등록하면 override됨. 

2의 경우, HTML/JS를 분리 할 수 있다. 그러나 1과 같이 특정 요소의 특정 이벤트에 대해서 이벤트 처리기를 단 하나만 등록할 수 있는 단점이 있다.

1.2의 경우 공통적인 단점이 여러 개발자가 작성할 경우 이전 이벤트가 override 되는 단점을 갖고 있다.

HTML에서는 부모 요소의 보더 박스 안에 자식 요소를 배치하며, 자식 요소는 부모 요소 안에 겹쳐진 상태로 표시된다. 이런 상태에서 자식 요소를 클릭하면 컴퓨터는 클릭한 요소가 부모/자식인지 알 수가 없다. 그래서 요소에서 이벤트가 발생하면 해당 요소의 조상요소를 포함한 전체에 이벤트 처리기나 이벤트가 리스너가 등록되어 있는지 확인하는 작업을 거쳐 등록된 함수가 있을 때 그 함수를 실행하도록 설계되어 있다.

        

            이벤트가 최상위 window 객체에서 DOM트리를 타고 이벤트 타겟(발생한 요소)까지 전파됨. 이 단계에서 이벤트 타겟에 등록한 리스너보다

            타고 내려가는 중간 과정에 어떠한 이벤트 리스너등이 있으면 그것이 먼저 실행됨. 즉 이벤트 타겟이 이벤트를 수신하기 전에 이벤트를 

            중간에 가로채기(캡쳐)한다고 하여 캡쳐링 단계라고 한다. useCatpure의 기본값은 false이며 버블링단계에서만 리스닝 한다. true일 경우 캡쳐링단계.

            이벤트가 이벤트 타겟에 도착(전파)된 단계. 이벤트 타겟에 등록된 이벤트는 이 시점에 실행됨.

            이벤트가 이벤트 타겟에서 출발하여 DOM 트리를 타고 window객체까지 거슬러 올라가 전파되는 단계. 이 단계에 반응하도록 등록된 이벤

            트 리스너는 타겟에 등록된 이벤트 이후에 실행됨. 단 focus / blur이벤트는 그 요소만 필요한 이벤트이므로 버블링이 발생되지 않음.

            이벤트 리스너의 useCapture가 true면 타겟과 캡쳐링 단계에서만 실행되고 false이면 타겟 단계와 버블링 단계에서만 실행된다.

            이벤트 처리기와 리스너 모두 같은 요소에 등록되어 있다면 이벤트 처리기 먼저 실행되고 리스너에 등록된 순서에 따라 순차적 실행된다.

            stopPropagation : 그 다음 요소로 이벤트가 전파되는 것을 막는다. 버블링 또한 되지 않음. 같은 단계의 리스너는 수행됨. 상위로 전파안됨

            stopImmediatePropagation : 상위로의 전파뿐만 아니라 같은 단계로도 전파되지 않고 일시적으로 멈춤.

            preventDefault : 웹 브라우저에 구현된 기본 동작을 취소. 해당 이벤트 객체의 cancelable 프로퍼티가 true일 경우만 사용가능.