JS_기본동작의 취소(Event)

기본동작의 취소

 

웹브라우저 구성요소들은 a태그가 클릭이 되면 href 주소로 이동이 되는 것과 같은 기본적인 동작 방법을 가지고 있다. 이를 모두 이벤트라고 칭하는데 우리는 JS를 통해 어떠한 조건이 충족이 되면 이런 기본동작들을 중단시킬 수 있다.

 

 

inline 방식

 

<p>
    <label>prevent event on</label>
    <input type="checkbox" id="prevent">
    </p>
    <p>
        <a href ="http:///www.naver.com"
         onclick="if(document.getElementById('prevent').checked)return false;">naver</a>
    </p>
    <p>
        <form action="http://www.naver.com" onclick="if(document.getElementById('prevent').checked) return false;">
            <input type="submit">
        </form>
    </p>

 

해당문은 checkbox가 check가 되어있으면 해당문을 막아주고 check가 해제되어있으면 event를 실행시켜주는 구문이다.  event를 막아주는 방법은 onclick="if(document.getElementById('prevent').checked) return false; 으로 event가 중지되었는데 'prevent' ID가 checked가 되어있니?라는 구문이고 true면 해당 if문을 타서 false를 만나 동작이 중지된다.

 

프로퍼티방식

 

    <p>
    <label>prevent event on</label>
    <input type="checkbox" id="prevent">
    </p>
    <p>
        <a href ="http:///www.naver.com" id="sel1">naver</a>
    </p>
    
    <script>
        document.getElementById('sel1').onclick = function(){
            if(document.getElementById('prevent').checked){
                return false;
            }
        }
    </script>

 

inline방식은 <a>구문에 바로 onclick을 넣었지만 프로퍼티방식은 a구문에 id값을 추가로 주어 <a>구문을 <script>단으로 가지고왔다. 그렇게 onclick구문을 통해 naver가 선택이 되면 해당 function구문을 실행할 수 있는 코드가 완성되었다.

 

 

addEventListener( ) 

 

 
    <p>
    <label>prevent event on</label>
    <input type="checkbox" id="prevent">
    </p>
    <p>
        <a href ="http:///www.naver.com" id="sel1">naver</a>
    </p>
    <p>
        <form action="http://www.naver.com" id ="sel2">
            <input type="submit">
        </form>
    </p>
    
    <script>
        document.getElementById('sel1').addEventListener('click',function(){
            if(document.getElementById('prevent').checked){
                event.preventDefault();
            }
        })
    </script>
    

 

EventListener( )는 return false가 아닌  event.preventDefault(); 로 동작을 멈춘다.