캡처링과 버블링

원하는 이벤트를 실행할 때 부모가 가지고 있는 이벤트도 같이 실행이 된다. 이때 내가 원하는 순으로 실행할 수 있다.

• 캡처링은 내가 원하는 이벤트 전에 부모의 이벤트 실행
• 버블링은 내가 원하는 이벤트 실행 후 부모 이벤트 실행

이벤트 전파(캡처링과 버블링)를 끊고 싶을 때 event.stopPropagation(); 사용

태그들의 기본 기능

• 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
• 폼에서 submit 버튼을 누르면 데이터가 전송된다.
• a 태그를 클릭하면 href 속성의 URL로 이동한다.

기본동작의 취소

inline 방식, property 방식

리턴값이 false이면 작동하지 않음

<p>
    <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
    <a href="<http://opentutorials.org>" **onclick="if(document.getElementById('prevent').checked) return false;**">opentutorials</a>
</p>
<p>
    <form action="<http://opentutorials.org>" **onsubmit="if(document.getElementById('prevent').checked) return false;**">
            <input type="submit" />
    </form>
</p>

addEventListener 방식

이 방식에서는 이벤트 객체의 preventDefault 메소드를 실행하면 기본 동작이 취소된다.