웹브라우저 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. 김수
    20180901 ㅠㅠ어려워 ㅓㅇ라ㅓㄴㅇ라ㅓㄴㅇ루라ㅣㄹ저ㅏㅈ
  2. SlowStarter
    감사합니다!
  3. 생선과고양이
    20180501 감사합니다
  4. 방파제
    Property 방식에서 이벤트 기본동작 취소할때
    document.querySelector('form').onclick = function(event) 여기서 onclick이 아니라 onsubmit해야되지않나요?
  5. 박인호
    12-31
    수강완료.
    사용자가 원하지 않는 행동을 하는 것을 방지할 수 있겠군요.
  6. crable
    감사합니다.
  7. Byeong Heon Lee
    감사합니다~
  8. 신입1
    감사합니다
  9. tachyon
    감사합니다
  10. JustStudy
    2016.07,13 수
    고맙습니다 3.
  11. JustStudy
    2016,07,03 일
    고맙습니다 2.
  12. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  13. 이주환
    2016. 04. 28
    잘보고 갑니다~!
  14. JustStudy
    고맙습니다
  15. 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 자세히 보기