해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 : 기본 동작의 취소
웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있습니다.
텍스트 필드에 포커스를 준 상태에서 키보드 입력이 들어오면 텍스트가 입력되고,
폼에서 submit 버튼을 누르면 데이터가 전송됩니다.
a 태그를 클릭하면 href 속성의 URL로 이동합니다.
이러한 기본적인 동작들을 기본 이벤트라고 하는데 ,
사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있습니다.
inline 방식
이벤트의 리턴값이 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>
위 그림과 같이 prevent event on 에 체크가 되어있으면 a 태그를 클릭해도 url 이 넘어가지 않고,
제출 버튼을 클릭해도 submit 이 되지 않는 것을 확인할 수 있습니다.
property 방식
이 또한 리턴 값이 false 면 기본 동작이 취소됩니다.
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
</script>
addEventListener 방식
이 방식에서는 이벤트 객체의 preventDefault 메소드를 실행하면 기본 동작이 취소됩니다.
앞선 두개가 리턴값을 false 로 동작을 취소하는 것과는 차이가 있습니다.
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').addEventListener('click', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
document.querySelector('form').addEventListener('submit', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
</script>
참고로, ie9 이하 버전에서는 event.returnValue 를 false 로 하는 방식을 사용해야합니다.