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