[Javascript] Event 동작 취소하기

 

 

 

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

 

1. 텍스트 필드에 포커스를 둔 상태에서 키보드를 입력하면 텍스트가 입력된다.
2. form에서 submit 버튼을 누르면 데이터가 전송된다.
3. <a>를 클릭하면 href 속성의 URL로 이동한다.

이러한 기본적인 동작들을 이벤트라고 하는데 지난 포스트에서는 이벤트를 추가하는 세 가지 방법에 대해 정리한 바 있다.

 

[Javascript] 이벤트 추가 바로 알기

 

이벤트는 등록뿐 아니라 취소하거나 조작할 수도 있는데 다음의 세 가지 방법을 소개해 본다.

 

 

 

 

1. 인라인(inline) 방식

아래의 예시와 같이 onclick 이벤트의 return 값이 false면 기본 동작이 취소된다.

<p>
    <label>prevent event on</label>
    <input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>

<p>
    <a 
    	href="https://www.google.com" 
    	onclick="if(document.getElementById('prevent').checked) return false;"
    >
    Google
    </a>
</p>

<p>
    <form 
      action="https://www.google.com" 
      onsubmit="if(document.getElementById('prevent').checked) return false;"
    >
    	<input type="submit" />
    </form>
</p>

 

 

 

 

2. 프로퍼티(property) 방식

함수의 return 값이 false면 기본 동작이 취소된다.

<p>
    <label>prevent event on</label>
    <input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>

<p>
    <a href="https://www.google.com">Google</a>
</p>

<p>
    <form action="https://www.google.com">
    	<input type="submit" />
    </form>
</p>

 

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;
};

 

 

 

 

 

3. 이벤트리스너 방식(addEventListener)

이 방식에서는 이벤트 객체의 e.preventDefault()를 실행하면 기본 동작이 취소된다.

<p>
    <label>prevent event on</label>
    <input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>

<p>
    <a href="https://www.google.com">Google</a>
</p>

<p>
    <form action="https://www.google.com">
    	<input type="submit" />
    </form>
</p>

 

document.querySelector('a').addEventListener('click', function(e){
    if(document.getElementById('prevent').checked) 
        e.preventDefault(); // 링크 동작 금지
});

document.querySelector('form').addEventListener('submit', function(e){
    if(document.getElementById('prevent').checked) 
        e.preventDefault(); // form submit 금지
});