[제이쿼리]- <a> <form> 요소 클릭 시 기본 이벤트 차단하기

 a태그에 click이나 dbclick 메서드를 등록하면 클릭할 때마다 a태그에 링크된 주소로 이동하는 문제가 발생한다. 
 이 문제를 해결하려면 기본 이벤트를 차단해야 한다.
        
기본 이벤트란 태그가 가지고 있는 고유 기능을 말한다. 
form 요소 중 button또한 기본 기능인 submit기능을 차단해야 할 경우 기본 이벤트를 먼저 제거해야 한다. 

[기본형]

1. return false를 이용하는 방식

$("a 또는 form 요소").이벤트명(function(){
     자바스크립트 코드;
     return false;  <- 기본 이벤트를 차단함. 
})

       

2. preventDefault()매서드를 이용하는 방식 ★

매개변수 이름은 event 혹은 e로 지어준다. 

$("a 또는 form 요소").이벤트명(function(event){
    event.preventDefault();
    자바스크립트 코드;
    
})

//기본이벤트 차단

        $(".btn1").on("click", function (event) {

          event.preventDefault(); //기본 이벤트 차단 a링크에 연결되어있던 주소로 연결되지않고 이벤트를 실행하게 된다.

          $(".txt1").css({ backgroundColor: "pink" });

        });

        //

        $(".btn2").on("dblclick", function (event) {

          event.preventDefault(); //링크 이동하는 기본 이벤트 차단

          $(".txt2").css({ backgroundColor: "pink" });

        });

        //

        $(".btn3").on("click", function (e) {

          event.preventDefault(); //버튼의 기본값인submit기능을 차단

          $(".txt3").css({ backgroundColor: "pink" });

        });