Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to 제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
Similar to 제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing (6)
More from dgmit2009
More from dgmit2009 (20)
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
- 1. JavaScript Event Bubbling & Capturing 2014. 11. 24 Version : 1.0.0 made by 신혜미 R&D팀
- 2. 2 CONTENTS. 1. 들어가면서 ………… 2 2. Bubbling …………… 4 3. Capturing …………… 6 4. stopPropagation … 8 5. preventDefault … 10 6. Summary ………… 16 7. Reference ………… 19
- 3. 3 1. 들어가면서… 10월 컨퍼런스에서 다룬 주제 •mouseover •사실은… Event type MouseEvent Supported HTML tags All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> <w3schools.com> Bubbles Yes Cancelable Yes Event Type MouseEvent Supported HTML tags All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> <w3schools.com>
- 4. 4 1. Bubbles와 Canclelable Bubbles? Canclelable? 궁금증 Bubbles Cancelable 그것이 알고싶다!
- 5. 5 1. 파헤쳐보기 궁금하다면! 폭풍 검색
- 6. 6 1. 들어가면서 다시 들어가면서… Bubbles와 cancelable을 이해하기 위해 알아야 할 것들, 그리고 알게 된 것들 1)Bubbling 2)Capturing 3)event.stopPropagation 4)event.preventDefault
- 7. 7 2. Bubbling 거품이 뽀글뽀글 •이벤트가 발생한 엘리먼트에서 부모 엘리먼트까지 이벤트 발생 •1, 2, 3번 엘리먼트에 onclick 이벤트가 바인딩 되어있다고 가정 •3번 엘리먼트에 onclick 이벤트가 발생 했을 경우 - 이벤트 발생 순서 : 3 -> 2 -> 1
- 8. 8 2. Bubbling 거품이 뽀글뽀글 •Bubbling order - 수면에서 공기방울이 올라오는 것처럼 가장 내부의 엘리먼트에서 부모 엘리먼트까지 이벤트 발생 •예제 확인
- 9. 9 2. Bubbling : this vs event.target 거품이 뽀글뽀글 •this : 이벤트가 발생한 엘리먼트 •event.target : 이벤트가 최초 발생한 엘리먼트 •3번 엘리먼트에 onclick 이벤트가 발생했다고 가정 •예제 확인
- 10. 10 3. Capturing 설명 •이벤트 발생 과정 2가지 - Capturing - Bubbling •버블링과 반대 방향으로 발생 •이벤트가 처음 발생 시 가장 상위 엘리먼트에서 하위 엘리먼트로 캡쳐링이 발생
- 11. 11 3. Capturing 캡쳐하기 •1 -> 2 -> 3의 순서로 이벤트 캡쳐링이 발생 •3 -> 2 -> 1의 순서로 이벤트 버블링이 발생
- 12. 12 3. Capturing 캡쳐하기 •이벤트를 핸들링하는 모든 메소드들은 캡쳐링이 무시되며, 이벤트의 캡쳐링을 확인 하기 위해선 addEventListener를 사용해야 함 - 예 : elem.addEventListener( type, handler, phase ); - phase = true : handler를 캡쳐링 단계에서 동작하도록 설정 - phase = false : handler를 버블링 단계에서 동작하도록 설정 •캡쳐링 예제 확인 •캡쳐링과 버블링 예제 확인
- 13. 13 4. event.stopPropagation 정지! •Propagation - 전파, 확산 •이벤트가 발생한 엘리먼트에서 부모 엘리먼트로 Bubbling 발생 •Bubbling을 막기위해 사용 •예 - <div onclick=“click();”></div> function click(){ event.stopPropagation(); } •참고 - IE : event.cancelBubble=true •stopPropagation 예제 확인
- 14. 14 5. event.preventDefault 안돼. 꿈도 꿀 생각 하지마 •별도의 특정 이벤트를 막기 위해 사용 •<a> 태그 •예 - <a href=“http://www.xxxx.com” onclick=”…”></a> - a 태그를 클릭 했을 경우 두가지 이벤트 발생 1) click 이벤트 실행 2) href에 표시된 브라우저로 이동 - a 태그의 click 이벤트만 실행하고 싶을 경우 1) <a href=“#” onclick=”…”></a> 2) event.preventDefault()
- 15. 15 5. event.preventDefault 안돼. 꿈도 꿀 생각 하지마 •a 태그의 click 이벤트만 실행하고 싶을 경우 1) <a href=“#” onclick=”…”></a> 2) event.preventDefault() •1) 의 단점 - 웹 브라우저의 페이지 상단으로 이동
- 16. 16 5. Summary 마무리 •이벤트는 처음에 Captured down, 그리고 Bubbles up의 순서로 발생
- 17. 17 5. Summary 마무리 •stopPropagation vs preventDefault Method stopPropagation preventDefault Description Bubbling의 전파를 막기 위해 사용 •엘리먼트의 default action을 막기 위해 사용 •Form의 Submit 버튼이나 url의 link Example event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true) event.preventDefault() Tip event.isPropagationStopped() 를 통해 stopPropagation 메소드가 호출 되었는지 확인 event.isDefaultPrevented() 를 통해 preventDefault 메소드가 호출 되었는지 확인
- 18. 18 5. Summary 마무리 •mouseover vs mouseenter Event mouseover mouseenter click keydown Browser Support •Chrome : Yes •IE : Yes •FireFox : Yes •Safari : Yes •Opera : Yes •Chrome : 30 •IE : 5.5 •FireFox : Yes •Safari : 6.1 •Opera : 11.5 •Chrome : Yes •IE : Yes •FireFox : Yes •Safari : Yes •Opera : Yes •Chrome : Yes •IE : Yes •FireFox : Yes •Safari : Yes •Opera : Yes Bubbles Yes No Yes Yes Cancelable Yes No Yes Yes Event Type Mouse event Mouse event Mouse event Keyboard Event
- 19. 19 6. Reference 도우미들 •http://javascript.info/ •http://mohwaproject.tistory.com/entry/dom-event-bubbling- capture%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC •http://ismydream.tistory.com/98 •http://www.w3schools.com/
- 20. 20