1. 이벤트 캡처링
  • 가장 하위에 있는 태그에 event 가 발생했을 때 제일 먼저 html 에 장착되어있는 event handler 가 실행되고, 그다음 body -> fildeset -> input (btn) 태그 방향으로 이벤트 핸들러가 호출되면 이벤트 캡처링
    (부모에 있는 event handler -> 자식 event handler 방향으로 흘러가는 것)
    (html -> body -> filedset -> input 방향으로 eventHandler 실행)
    캡처링은 많이 중요하지 않음 ! (과거 브라우저에서 실행이 안됬었음)
    상위 태그에 걸려있는 이벤트 핸들러가 호출되서 실행
  1. 이벤트 버블링
  • 가장 하위에 있는 태그에 event가 발생했을 때 하위부터 상위로 올라가는 식으로 event handler가 실행되는 것은 event bubbling !
    (자식태그에서 부모태그로 event handler가 호출되는 것 )
    (input -> filedset -> body -> html 방향으로 eventHandler 실행)
    버블링이 실제에 더 많이 사용 됨
    버블링 -> 안쪽에서부터 거품이 발생되는데 안쪽에서부터 호출되는 것이 버블링이라고 함 !
  • 참고
    addEveneListener(event, 함수, true/false);
    false가 default.
    세번째 인자를 true로 주면 걔는 캡처링을 하겠다. 이런뜻
    아무것도 안주면 false값으로 버블링 !
<head>
  <style> 
    html{border: 5px solid red; padding: 30px; }
  </style>
</head>
<body>
  <filedset>
    <legend>event propagation</legend>
    <input type="button" id="target" value="target">
  </filedset>

이벤트 전파를 막기 위해서는 event.stopPropagtion() 이라는 method 를 호출 !