기본동작의 취소

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

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

• 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.

• 폼에서 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로 해야 한다.