JQuery Event
JQuery Event
■ JQuery는 이벤트를 기반으로 작동하는 구성인데요. HTML 문서가 로드 된 후, 또는 버튼을 클릭했을 때 이벤트가 실행됩니다. JQuery로 프로그램을 작성할 때는 언제 어떤 이벤트가 실행될지를 생각하면서 코딩해야 하는데요. 이번 글에서는 이벤트를 연결하는 과정을 정리해볼까 합니다. JQuery에서 이벤트를 연결하는 과정은 크게 두 가지로 나눌 수 있습니다.
■ 첫 번째는 화면에 보이는 요소에 이벤트를 연결하는 정적 연결 방식이구요. 두 번째는 앞으로 추가될 가튼 요소에 모두 자동으로 이벤트가 연결되도록 동적 연결 방식입니다. 당연히 동적 연결 방식을 사용하는 게 좋겠죠? 두 가지 방법을 하나씩 정리해볼게요.
1. 정적 연결
이 형식은 화면에 보이는 요소에 이벤트를 연결하는 방법인데요. 형식은 다음과 같습니다.
$("선택자"). bind(이벤트 종류, 실행 함수);
예를 들어 <p>태그에 이벤트를 연결하는 방법은....
$("p").bind("click", function(){
실행할 함수;
});
이 방법은 일반적인 동적 연결 방법이구요. click 함수는 많이 사용되기 때문에 JQuery에서 추가로 다음과 같은 함수를 제공하고 있습니다.
$("p").click(function(){
실행할 코드;
});
이렇게 정적으로 연결하면 추후에 추가되는 <p> 태그에 이벤트를 추가하려면 똑같은 과정을 계속 거쳐야 합니다. 조금 불편할 수도 있겠죠? 그럼 추후에 생성되는 <p>태그에도 자동으로 같은 이벤트가 연결되도록 하는 동적 연결 방법을 알아보겠습니다.
2. 동적 연결
이 연결은 on() 메서드를 이용하는데요. 형식은 다음과 같습니다.
$(document).on(이벤트, 선택자, 함수);
이 형식대로 <p>태그에 연결해보겠습니다.
$(document). on("click", "p", function(){
실행할 코드;
});
이 형식을 생각하면서 이벤트 동적 연결 예제를 하나 만들어보겠습니다.
■ 본문에 <p>태그를 삽입했습니다. 먼저 브라우저에서 실행해보겠습니다.
■ 아직 이벤트 연결을 하지 않았기 때문에 클릭해도 아무 변화가 없는데요. js 파일에서 동적 이벤트를 연결하겠습니다.
■ 동적 연결 방식에 맞게 클릭했을 때 alert 창을 띄우는 이벤트를 연결하고 있습니다. 이제 브라우저에서 실행한 후 문장(p 태그)을 클릭해보겠습니다.
■ 이벤트가 연결돼서 alert 창이 뜨는 걸 확인할 수 있습니다. 동적으로 연결해놨기 때문에 앞으로 계속해서 <p>태그를 추가해도 모두 이벤트가 적용되겠죠?
이렇게 해서 JQuery의 동적, 정적 이벤트 연결 방법에 대해서 알아봤습니다. 수고하셨어요.