Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing

8,980 views

Published on

1.들어가면서
2.Bubbling
3.Capturing
4.stopPropagation
5.preventDefault
6.Summary
7.Reference

Published in: Technology
  • Be the first to comment

제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing

  1. 1. JavaScript Event Bubbling & Capturing 2014. 11. 24 Version : 1.0.0 made by 신혜미 R&D팀
  2. 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. 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. 4 1. Bubbles와 Canclelable Bubbles? Canclelable? 궁금증 Bubbles Cancelable 그것이 알고싶다!
  5. 5. 5 1. 파헤쳐보기 궁금하다면! 폭풍 검색
  6. 6. 6 1. 들어가면서 다시 들어가면서… Bubbles와 cancelable을 이해하기 위해 알아야 할 것들, 그리고 알게 된 것들 1)Bubbling 2)Capturing 3)event.stopPropagation 4)event.preventDefault
  7. 7. 7 2. Bubbling 거품이 뽀글뽀글 •이벤트가 발생한 엘리먼트에서 부모 엘리먼트까지 이벤트 발생 •1, 2, 3번 엘리먼트에 onclick 이벤트가 바인딩 되어있다고 가정 •3번 엘리먼트에 onclick 이벤트가 발생 했을 경우 - 이벤트 발생 순서 : 3 -> 2 -> 1
  8. 8. 8 2. Bubbling 거품이 뽀글뽀글 •Bubbling order - 수면에서 공기방울이 올라오는 것처럼 가장 내부의 엘리먼트에서 부모 엘리먼트까지 이벤트 발생 •예제 확인
  9. 9. 9 2. Bubbling : this vs event.target 거품이 뽀글뽀글 •this : 이벤트가 발생한 엘리먼트 •event.target : 이벤트가 최초 발생한 엘리먼트 •3번 엘리먼트에 onclick 이벤트가 발생했다고 가정 •예제 확인
  10. 10. 10 3. Capturing 설명 •이벤트 발생 과정 2가지 - Capturing - Bubbling •버블링과 반대 방향으로 발생 •이벤트가 처음 발생 시 가장 상위 엘리먼트에서 하위 엘리먼트로 캡쳐링이 발생
  11. 11. 11 3. Capturing 캡쳐하기 •1 -> 2 -> 3의 순서로 이벤트 캡쳐링이 발생 •3 -> 2 -> 1의 순서로 이벤트 버블링이 발생
  12. 12. 12 3. Capturing 캡쳐하기 •이벤트를 핸들링하는 모든 메소드들은 캡쳐링이 무시되며, 이벤트의 캡쳐링을 확인 하기 위해선 addEventListener를 사용해야 함 - 예 : elem.addEventListener( type, handler, phase ); - phase = true : handler를 캡쳐링 단계에서 동작하도록 설정 - phase = false : handler를 버블링 단계에서 동작하도록 설정 •캡쳐링 예제 확인 •캡쳐링과 버블링 예제 확인
  13. 13. 13 4. event.stopPropagation 정지! •Propagation - 전파, 확산 •이벤트가 발생한 엘리먼트에서 부모 엘리먼트로 Bubbling 발생 •Bubbling을 막기위해 사용 •예 - <div onclick=“click();”></div> function click(){ event.stopPropagation(); } •참고 - IE : event.cancelBubble=true •stopPropagation 예제 확인
  14. 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. 15 5. event.preventDefault 안돼. 꿈도 꿀 생각 하지마 •a 태그의 click 이벤트만 실행하고 싶을 경우 1) <a href=“#” onclick=”…”></a> 2) event.preventDefault() •1) 의 단점 - 웹 브라우저의 페이지 상단으로 이동
  16. 16. 16 5. Summary 마무리 •이벤트는 처음에 Captured down, 그리고 Bubbles up의 순서로 발생
  17. 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. 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. 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. 20

×