programming/javascript
브라우저의 기본 동작 막기
헤써니
2023. 1. 15. 23:14
자동으로 실행하는 브라우저의 동작들을 자바스크립트로 다루어야 하는 경우들이 있다.
자동으로 실행하는 브라우저 동작
- 링크를 클릭하면, 연결된 링크의 주소로 이동
- 폼 전송을 클릭했을 때, 서버에 폼이 전송
- 마우스를 클릭한채로, 글자를 드래그하면 선택
위 동작들을 막기 위한 방법으로는 2가지가 있다.
1. event 객체 사용한다. event 객체 안에 있는 preventDefault() 메서드를 사용한다.
2. 핸들러가 on<event>에 할당되었을 경우, return false를 반환하게 해 기본 동작을 막는다.
<a href="/" onclick="return false">첫번째 방식</a>
<a href="/" onclick="event.preventDefault()">두번째 방식</a>
위와 같이 기본동작이 막힌 경우, event 객체 안에 있는 defaultPrevented의 값은 true이다.
event.defaultPrevented 값을 사용하여, 버블링을 막는 방법 으로 사용하는 event.stopPropagation()을 용도를 대체할 수 있다.
event.stopPropagation()은 사용하는 구간을 dead zone으로 만들기 때문에, event.defaultPrevented를 활용하는 것이 좋다.