jQuery의 on() 메서드는 선택한 요소에 이벤트 핸들러를 연결하는 방법입니다. 셀렉터로 지정할 수 있는 요소는 페이지 내 어떤 것이든 가능합니다. 가장 흔하게는 on()을 사용해 버튼에 클릭 핸들러를 연결하지만, 실제로는 모든 종류의 이벤트 핸들러를 어떤 요소에든 연결할 수 있습니다.
이 글에서는 on()의 기본 문법을 살펴보고, 실전에서 바로 활용할 수 있는 예제들을 다뤄보겠습니다. 참고로 on()은 여러 선택적 인자를 받을 수 있지만, 본문에서는 필수 인자와 일반적인 사용 방식에만 집중하겠습니다.
jQuery on()이란 무엇인가?
on() 메서드는 선택된 요소에 이벤트 핸들러를 안정적으로 부착할 수 있는 수단을 제공합니다. on()은 콜백 함수(callback function)를 인자로 받는데, 콜백 함수란 나중에 특정 시점에 실행되도록 메서드에 전달되는 함수를 의미합니다. 즉, 우리가 정의한 동작이 실제로 일어나는 지점이 바로 이 콜백 함수입니다.
예를 들어 on()으로 버튼에 클릭 이벤트 핸들러를 연결했다면, 콜백 함수 안에는 '버튼이 클릭된 후' 실행될 동작을 정의하게 됩니다.
on() 기본 문법
on()의 작동 원리를 이해했으니 이제 구체적인 문법을 살펴보겠습니다. jQuery에서는 항상 먼저 대상 요소를 선택하고, 그다음 on() 메서드를 호출해 이벤트 핸들러를 연결합니다. on()에 전달되는 첫 번째 인자는 이벤트 이름이며, 그 뒤에 콜백 함수가 따라옵니다.
$('.btn').on('click', function() {
alert("버튼을 클릭했습니다!")
})
위 코드는 버튼을 선택하고 on()을 호출한 뒤, 필요한 인자들을 전달합니다. 주의할 점은 이벤트 이름('click')이 반드시 따옴표 안에 있어야 한다는 것입니다. 콜백 함수에서는 경고창(alert)으로 메시지를 표시해 콜백이 정상적으로 작동하는지 확인할 수 있습니다.
jQuery on() 실전 예제
앞서 살펴본 버튼 예제를 확장해 보겠습니다. 단순히 경고창을 띄우는 것보다 더 의미 있는 동작을 구현해 보겠습니다.
예제 1: 클릭 시 새 콘텐츠 추가하기
경고창 대신, 버튼이 클릭된 후 화면에 새로운 내용을 표시할 수 있습니다. 이를 위해 콜백 함수 안에서 jQuery의 append() 메서드를 사용합니다. append()는 인자로 전달된 콘텐츠를 선택된 요소의 끝에 추가합니다.
먼저 HTML 버튼과, 새 콘텐츠가 추가될 <div>를 렌더링합니다.
<button class="btn"> 클릭하세요! </button> <div class="message"> </div>
현재 화면에는 버튼만 표시됩니다. 이제 jQuery로 버튼을 선택하고, 클릭 시 메시지가 나타나도록 만들어 보겠습니다.
$('.btn').on('click', function() {
$('.message').append('버튼이 클릭되었습니다.')
})
버튼은 클래스명으로 선택되어 클릭 이벤트 핸들러가 연결됩니다. 콜백 함수 안에서는 'message' 클래스를 가진 <div>에 메시지를 추가합니다.
on() 메서드가 잘 작동합니다! 한 가지 유의할 점은, 이 방식에서는 버튼을 클릭할 때마다 메시지가 <div> 하단에 계속 추가된다는 것입니다. 그럼 다른 예제를 살펴보겠습니다.
예제 2: 버튼을 새 콘텐츠로 교체하기
다음 예제에서는 버튼이 클릭된 후 버튼 자체를 새로운 콘텐츠로 교체해 보겠습니다. 이렇게 하면 더 통제된 사용자 경험을 만들 수 있습니다.
<div> <button class="btn"> 클릭하세요! </button> </div>
여기서는 버튼을 <div>로 감싸주었습니다. 덕분에 jQuery의 html() 메서드를 사용해 버튼을 텍스트가 담긴 <p> 태그로 대체할 수 있습니다. 사용자에게 버튼을 딱 한 번만 눌러 새로운 콘텐츠로 이어지게 하고 싶을 때 유용한 패턴입니다!
$('.btn').on('click', function() {
$('div').html('<p>버튼이 교체되었습니다</p>')
})
앞선 예제와 같은 방식으로 버튼을 선택하고 on()으로 클릭 핸들러를 연결합니다. 콜백 함수 안에서는 버튼의 HTML을 새로운 내용이 담긴 문단(p) 요소로 교체합니다.
버튼을 클릭하면:
새로운 콘텐츠가 나타나고 버튼은 사라집니다! 이처럼 사용자 경험을 더 체계적으로 유도할 수 있는 견고한 방법입니다.
마무리
지금까지 jQuery on() 메서드를 사용해 몇 줄의 코드만으로 요소에 이벤트 핸들러를 연결하는 방법을 살펴보았습니다. 기본 문법을 익힌 후 두 가지 실전 예제를 통해 활용법을 확인했습니다. on()은 원하는 결과에 따라 특정 방식으로도, 범용적으로도 유연하게 사용할 수 있습니다.
이 가이드는 on() 사용법에 대한 입문 과정이므로, 직접 코드를 작성하며 충분히 연습해 보세요. 이벤트 핸들러를 완전히 마스터하는 과정에서 무궁무진한 활용법을 발견하게 될 것입니다!