javascript 이벤트 취소(unbind)

예전에 작업했던 내용들을 기억/기록하기 위해 남기는 포스팅입니다. 

 

 

공동으로 작업을 하다 보면 생기는 문제들이 있습니다.  

이번 포스팅의 경우 생긴 문제는 '퍼블리셔'가 만들어준 html과 javascript를 개발에 입히는 과정에서 javascript 이벤트가 서로 겹치는 문제가 발생했습니다. 

 

상황을 예로 설명드리면,

글의 제목을 클릭하면 글 내용이 펼쳐지고, 다시 누르면 접히는 이벤트가 있습니다. 

퍼블리셔분이 친절하게도 해당 이벤트 처리를 해 주었지만 개발에 해당 내용을 적용하는 과정에서 글 제목 클릭 시 조회수 추가 및 글 내용 및 첨부파일 등을 가져오는 작업이 추가되어야 했습니다. 

퍼블리셔와 개발자가 javascript를 각각 관리하기에 임의로 퍼블리셔의 코드를 손대기도 어려운 상황이었습니다. 

 

그래서 퍼블리셔의 코드는 건드리지 않고, 해당 이벤트가 필요한 부분에서 해당 이벤트를 취소(unbind)하고 따로 이벤트를 등록하여 사용하는 방식으로 작업했습니다. 

 

다른 사람이 작성한 무시해야 할 이벤트 코드 

    $(function(){
      //다른 사람이 작성한, 무시해야 할 이벤트 코드
      $('.btnClick1').click(function(e){
        e.preventDefault();

        alert('다른 사람이 작성한 무시해야할 클릭1')
      });

      $(document).on('click', '.btnClick2', function(e){
        e.preventDefault();

        alert('다른 사람이 작성한 무시해야할 클릭2')
      });
    });

 

이미 등록된 이벤트 취소 및 적용되야할 이벤트 코드

$(function(){
      //다른 사람이 작성한 무시해야할 이벤트 unbind 
      $('.btnClick1').unbind('click');
      //$('.btnClick2').unbind('click');  //$(document).on('click', '.btnClick2')으로 된 이벤트에는 적용이 안됨
      $(document).off('click', '.btnClick2');
      
      //적용되야 할 이벤트 작성
      $('.btnClick1').click(function(e){
        e.preventDefault();

        alert('적용되야하는 클릭1')
      });

      $(document).on('click', '.btnClick2', function(e){
        e.preventDefault();

        alert('적용되야하는 클릭2')
      });
    });

 

해당 내용 jsfiddle로 확인 [새창]