웹브라우저 JavaScript

기본동작의 취소

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.

  • 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
  • 폼에서 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>

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 메소드를 실행하면 기본 동작이 취소된다. (실행)

<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로 해야 한다. 

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다
  2. 임앤강
    2022-02-14 감사합니다.
  3. 드림보이
    2021.12.31. 기본동작의 취소 파트 수강완료
  4. pmxsg
    2021.12.23.수강
  5. labis98
    20210913 좋은 강의 감사합니다.
  6. 프로퍼티로 들어가 있다면 return false; 를 통해 이벤트를 취소가능
    addEventListener로 추가했다면 event.preventDefault();로 취소 가능
  7. 박병진
    2020.12.11 완료
  8. 싸알
    완료
  9. anne
    완료
  10. 정승옥
    완료
  11. 한강
    기본동작취소방법 감사합니다~~^^!
    200710
  12. 굼벵이
    완료
  13. JuicyFresh
    감사합니다
  14. 김수
    20180901 ㅠㅠ어려워 ㅓㅇ라ㅓㄴㅇ라ㅓㄴㅇ루라ㅣㄹ저ㅏㅈ
  15. SlowStarter
    감사합니다!
  16. 생선과고양이
    20180501 감사합니다
  17. 방파제
    Property 방식에서 이벤트 기본동작 취소할때
    document.querySelector('form').onclick = function(event) 여기서 onclick이 아니라 onsubmit해야되지않나요?
  18. 박인호
    12-31
    수강완료.
    사용자가 원하지 않는 행동을 하는 것을 방지할 수 있겠군요.
  19. crable
    감사합니다.
  20. Byeong Heon Lee
    감사합니다~
  21. 신입1
    감사합니다
  22. tachyon
    감사합니다
  23. JustStudy
    2016.07,13 수
    고맙습니다 3.
  24. JustStudy
    2016,07,03 일
    고맙습니다 2.
  25. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  26. 이주환
    2016. 04. 28
    잘보고 갑니다~!
  27. JustStudy
    고맙습니다
  28. if(document.getElementById('prevent').checked=false;) 보단

    if(!document.getElementById('prevent').checked)를 사용하는게 더 좋겠네요.
    대화보기
    • 코딩!
      감사합니다!
    • 호두과자
      사랑합니당~~
    • 뉴비
      if(document.getElementById('prevent').checked==false) //체크되어 있지 않다면
      {
      document.getElementById('prevent').checked=true; //체크하게 만듦
      }

      이런식으로 하시는거 아닐까요
      대화보기
      • Anna Kim
        강의영상 볼때마다 참 감사하다는 마음뿐입니다. 같이 배우시는 분들께 또한 많은걸 배우고 있습니다.

        체크박스 반대상황에 대한 기본적인 질문 하나요...
        document.getElementById('prevent').checked 에서 checked 는 굳이 지정하지 않아도 기본적으로 true라고 하신거같은데 그럼 반대로 체크박스가 체크되어있는 상황에서 uncheck 하게만들고 싶으면 어떻게 하면 되나요?

        if(document.getElementById('prevent').checked=false;)

        검색해서 테스트해봤는데 안되네요.
      • 키위
        강의 감사합니다!
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기