[javascript] jQuery Onclick 이벤트 중복 해결하기

JQuery를 이용해서 click이벤트를 정의 할 때, 아래와 같이 코드를 짠다.

$("#id").on("click",funtio(e){
	//do something
});

이 경우 클릭을 하게 되면 1회 실행되는 것이 맞지만 종종 여러번 실행되는 경우가 발생한다.

이러한 경우가 발생하는 이유는 요소를 감싸고 있는 부모 태그들도 클릭 이벤트에 반응하기 때문에 발생하는 현상으로 버블링 현상이라고 하고 영어로 "Bubble Up"이라고 한다.

 

이벤트 버블링 해결 방법

1. .off() 를 이용한 사용하는 방법

//모든 이벤트 제거하기
#("#id").off().on("click",funtion(e){
	//do someting
});

//특정 이벤트만 제거하기(click 이벤트만 제거)
$("#id").off("click").on("click",funtion(e){
	//do something
});

 

2.  .unbind(), .bind() 를 이용한 방법

이미 바인딩된 이벤트를 unbinding 시키고 다시 binding을 시키는 방법이다.

//unbind 후 bind 하기
$("#id").unbind("click").bind("click",funtion(e){
	//do something
});

 

3. .stopPropagation() 를 이용한 방법

부모 태그의 이벤트 전파를 멈추는 방법이다.

//부모 태그로의 이벤트 전파를 멈춘다.
$("#id").on("click",funtion(e){
	e.stopPropagtion();
    //do Something
});

 

4. .preventDefault() 를 이용하는 방법

해당 이벤트 외에 별도의 브라우저 행위를 막기 위한 방법이다.

예를 들어 a태그나 submit태그를 누르게 되면 href를 통해 이동하거나, 창이 새로고쳐져 실행되는데,

preventDefault는 이러한 기본적인 동작을 막을 수 있다.

$("#id").on("click",funtion(e){
	e.preventDefault();
    //do Something
});

해당 요소가 a태그라고 가정했을 때, href에 웹페이지의 주소가 적혀 있어도 해당 페이지로 이동하지 않는다.

a태그 뿐만 아니라 textarea, input 또한 마찬가지로 기본 동작을 막을 수 있다.