이벤트 흐름
리스너
===============
이벤트 전파>
(버블링과 캡처링)
html 에서 이벤트는 예를들어 버튼은 input 태그에 감싸져 있고,
input 태그는 fieldset이라는태그에,,,
fieldset은 body태그에
body태그는 html 태그에 감싸져 있다.
즉
이벤트는 큰 html 태그로부터 하위 input태그까지 아래로 연결되있는 것을 캡처링 이라고하고
이벤트를 실행하는 것은 젤 하위 input 태그 서부터 html태그 까지 연결되어 실행이(호출되어나가는것) 되어나가는것을
버블링이라고한다.
캡쳐링은
처음에 호출된 결과의 순서이고
버블링은 호출된 결과가 빠져나갈떄의 순서이다
캡쳐링은
가장 바깥쪽에서 안쪽으로 호출이 되는 순서를 말한다
(부모에서 자식으로 가는 호출 순서 로 이벤트가 호출되는 방식을 캡쳐링 이라고함)
이게 이벤트의 흐름이다....
html 이 가장먼저 실행되고
그다음 body
그다음 fieldset
그다음 input 순서로 실행이되는 것을 말한다.
버블링은
이벤트 버블링이라고 들어보셨나요? DOM에 연결한 이벤트는 버블링이 일어납니다. 버블링이란 자식의 이벤트가 부모에도 전달되는 것을 말합니다.
위와 같은 구조가 있을 때 div#third를 클릭한 경우, 부모와 조상 태그인 second, first 순으로 같은 클릭 이벤트가 발생합니다. 이 현상을 기억해두세요.
안쪽에 있는 코어 에서 바깥으로 나간다는의미
가장 안쪽에서 바깥쪽으로 호출되는 방식
자식에서 부모로~
input -> fieldset -> body -> html
여기서 특정 이벤트를 중단하고싶으면
stophandler 라는 함수를 하나 만들어서
event.stopPropagation();
을 사용하면된다.
그럼 그 특정 이벤트호출은 끊키게 된다
========================
가끔 html 자체에 이벤트 리스너를 연결하시는 분이 있습니다.
클릭
이 형식은 별로 권장하지는 않습니다. HTML과 자바스크립트는 분리가 원칙입니다. 그래야 나중에 유지보수가 쉽거든요. 그리고 위와 같이 하면 이벤트가 발생할 때 eval이라는 자바스크립트 내부 메소드가 실행되는 데(가짜 eval이긴 합니다만) 이 eval은 자바스크립트에서 반드시 피해야하는 것 중 하나입니다.
클릭
이렇게 코드를 분리합시다. HTML은 HTML의 역할만, 자바스크립트는 자바스크립트의 역할만 충실히 하는 모습입니다. 보기 좋습니다.
