JQuery event on / off

JQuery event on / off

■ 프로그래밍을 하다 보면 상황에 따라서 이벤트를 발생, 제거해야 하는데요. 이번 글에서는 이벤트를 연결하고 제거하는 과정을 정리해보겠습니다. 화면에 보이는 태그에 이벤트를 연결하고 제거하는 정적인 형태는 다음과 같습니다. 

$("선택자").bind(이벤트이름, 함수); 

$("선택자").unbind(이벤트 이름, 함수)

■ 하지만 정적인 형태는 많이 사용하지 않기 때문에 이렇게 형식만 알아보고요. 동적 연결과 제거에 대해서 정리하고 예제를 만들어보겠습니다. 먼저 동적인 이벤트 연결과 제거의 형식은 다음과 같습니다. 

$(document).on(이벤트이름, 선택자, 함수);

$(document).off(이벤트이름, 선택자, 함수);

■ 이렇게 on과 off 메서드를 이용해서 연결과 제거를 하시면 됩니다. 예제를 하나 만들어 볼 텐데요. 버튼 두 개를 배치해서 event 버튼을 클릭하면 alert 창이 뜨는 이벤트를 실행하도록 하고, 두 번째 이벤트 제거 버튼을 클릭하면 연결되어 있던 이벤트가 제거돼서 더 이상 alert 창이 실행되지 않도록 하는 내용입니다.

 

 

■ HTML 문서에서는 버튼 두 개만 배치했습니다. 

■ 브라우저에서 확인한 모습이고요. 위쪽 [이벤트 발생] 버튼을 클릭하면 alert 창을 띄우는 이벤트를 연결해서 계속 사용하다가 [이벤트 제거] 버튼을 클릭하면 제거되는 내용의 코드입니다. 

■ ccc() 함수는 'alert'창을 띄우는 함수이거요. $(document).on("click", "#aaa" ccc); 형식으로 첫 번째 버튼에 연결하고 있습니다. 브라우저에서 첫 번째 버튼을 클릭하면....

■ 그림과 같은 alert 창이 뜹니다. 마지막으로 두 번째 버튼을 클릭했을 때는 $(document).off("click", "#aaa", ccc);가 실행돼서 연결되어 있던 이벤트를 제거하는 내용의 예제입니다. 

 간단한 내용이니까 직접 입력해서 테스트해보시면... 첫 번째 버튼을 계속 클릭하면 alert 창이 계속해서 뜨다가 두 번째 버튼을 클릭한 후에는 뜨지 않게 됩니다. 안 뜨는 화면은 어떻게 표시할 수가 없어서..^^ 후다닥 입력해서 확인해보세요. 수고하셨습니다.