이벤트 기본동작 취소
이벤트 객체
DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있습니다. 이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 메소드들이 들어있습니다.
document.onclick = function(event) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
};
대표적인 메소드로 preventDefault와 stopPropagation, stopImmediatePropagation이 있습니다. preventDefault 메소드는 태그의 기본 동작(예를 들면, a 태그는 클릭 시 링크이동, form 태그은 폼 내용 전송)을 하지 않게 막아주는 역할을 합니다. stopPropagation 메소드는 태그를 클릭 시 부모에게 이벤트가 전달(버블링)되지 않도록 합니다.
stopImmediatePropagation은 버블링을 막음과 동시에 같은 이벤트의 다른 리스너도 실행되지 않도록 합니다. 만약 여러 개의 클릭 이벤트를 동시에 연결한 경우, stopPropagation으로 클릭 이벤트를 막아도 다른 클릭 이벤트는 실행됩니다. 하지만 stopImmediatePropagation으로 클릭 이벤트를 막으면 부모에게는 어떠한 이벤트도 버블링되지 않으면서 다른 클릭 이벤트도 실행되지 않습니다. 단, 다른 종류의 이벤트(마우스 오버 등)는 막지 못합니다.
메소드 외에도 이벤트 객체에는 많은 정보들이 들어있습니다. event.target 안에 이벤트가 발생한 태그의 정보가 들어갑니다. 클릭을 했을 때는 event.pageX, event.pageY로 클릭한 좌표를 알 수 있고, 키보드를 친 경우에는 event.key로 어떤 키를 쳤는지 알 수 있습니다. 이벤트 객체를 활용해서 다양한 이벤트를 만들어보세요!
