JS 자바스크립트 이벤트 핸들러 중첩 제어 / .off() / 이벤트 핸들러 중복 제어

 

 

$(document).on("click", "#examTag1",function(e) { ....

 

와 같은 클릭 이벤트 핸들러 등록 코드를 사용할 경우가 있다.

 

위 코드를 A라고 부르겠다. A 내부에 또 다른 요소의 클릭 이벤트 핸들러 등록 코드

 

$(document).on("click", "#examTag2",function(e) { ....

 

를 추가하고 B라고 하고 B 내부에 innerFunc 이라는 함수를 추가하고

 

id 값이 "examTag1" 인 요소를 여러번, 예를 들어 3번 클릭한 뒤 "examTag2" 를 클릭하면

 

앞서 "examTag1" 클릭한 횟수 만큼 B 내부의 innerFunc 함수가 위 예시에 따라 3번 실행된다

 

$(document).on("click", "#examTag1",function(e) {
  // id값 "examTag1" 인 요소가 클릭되면 실행되는 코드 블럭
  ...
  ...
  $(document).on("click", "#examTag2",function(e) {
    // id값 "examTag2" 인 요소가 클릭되면 실행되는 코드 블럭
    ...
    ...
	innerFunc(); // 특정 요청을 수행하는 함수
  });
});

 

그 이유는 id 값이 "examTag1" 인 요소 클릭 시 내부에 코드가 실행될 때

 

$(document).on("click", "#examTag2",function(e) {...

 

위 코드 내부의 코드가 실행되지는 않지만, 이벤트 핸들러는 등록이 된다.

 

그래서 페이지가 로드된 이후 id 값이 "examTag1" 인 요소를 여러번 클릭하면

 

내부의 이벤트 핸들러 등록이 중첩이 되고 페이지를 다시 로드 하지 않은 상태에서

 

id 값이 "examTag2" 인 요소를 여러번 클릭 시

 

$(document).on("click", "#examTag2",function(e) {...

 

내부에 있는 함수가 여러번 실행된다.

 

이런 경우에 사용할 수 있는 것이 .off() 메서드 이다

 

.off() 는 등록된 이벤트 핸들러를 해제해주는 역할을 하는데

 

아래 예시처럼 특정 이벤트 및 요소를 지정하여 이벤트 핸들러를 제어할 수 있도록 한다

 

$(document).on("click", "#examTag1",function(e) {
  // id값 "examTag1" 인 요소가 클릭되면 실행되는 코드 블럭
  ...
  ...
  $(document).off("click", "#examTag2").on("click", "#examTag2", function(e) {
    // id값 "examTag2" 인 요소가 클릭되면 실행되는 코드 블럭
    ...
    ...
	innerFunc(); // 특정 요청을 수행하는 함수
  });
});

 

위 처럼 코드를 수정하면 innerFunc 함수가 중첩 실행되지 않도록 제어할 수 있다