.click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

jQuery

작성일 2026-10-26 최근 수정일 2026-10-26

jQuery의 .click(handler)는 클릭할 때 실행할 함수를 등록하고, 인수 없는 .click()는 클릭 이벤트를 실행하는 단축 메서드입니다. 현재 새 코드에서는 등록에 .on("click", handler), 실행에 .trigger("click")를 사용합니다. 나중에 추가되는 버튼까지 처리하려면 유지되는 부모에 이벤트를 위임합니다.

등록과 실행을 구분해 권장 방식으로 바꾸기

.click() 공식 문서는 이 API를 jQuery 3.3부터 사용 중단 권고(deprecated) 대상으로 표시합니다. 이는 제거와 다릅니다. 이 글의 단축 메서드와 대안 비교는 3.7.1과 4.0.0에서 실행해 모두 동작함을 확인했지만, 새 코드는 문서가 안내하는 .on()과 .trigger()로 작성합니다.

목적	이전 단축 표현	권장 표현
현재 요소에 처리 함수 등록	.click(handler)	.on("click", handler)
코드에서 이벤트 실행	.click()	.trigger("click")
미래의 자손에도 적용	기존 요소의 직접 등록만으로는 부족	부모에 .on("click", 자손 선택자, handler)

handler는 이벤트 때 실행할 함수입니다. 함수 이름으로 전달할 때는 handler()처럼 즉시 호출하지 않습니다. .on()을 실행하는 시점에 요소가 있어야 직접 등록할 수 있으므로, 예제는 문서 준비 후 유지되는 부모를 선택합니다.

버튼·실행·해제를 비교하는 전체 예제

전체 코드를 UTF-8의 click-demo.html로 저장하고 브라우저에서 엽니다. 별도 설치는 없으며 공식 jQuery 파일을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 불러올 인터넷 연결이 필요합니다. 코드는 4.0.0을 사용하며 버튼 클릭·추가·재등록·해제·초기화는 3.7.1과 4.0.0에서 실행해 확인했습니다.

Alpha와 추가할 Beta가 실제 작업 버튼입니다. 나머지는 실습 제어 버튼이며 클릭 수에 포함하지 않습니다. 클릭한 항목의 이름과 누적 횟수를 표시하고 해당 항목의 강조를 켜거나 끕니다. 모든 button에 type="button"을 지정하여 폼에 넣어도 의도치 않게 제출하지 않게 했습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Click handlers and delegated events</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    button { padding: 10px; margin: 4px; }
    .item.selected { outline: 3px solid #b66b00; background: #fff3cf; }
    #items { border: 1px solid #ccc; padding: 12px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Click handlers and delegated events</h1>
  <div id="items">
    <button type="button" class="item" id="first"><span>Alpha</span></button>
  </div>
  <button type="button" id="add">Add Beta</button>
  <button type="button" id="trigger">Trigger Alpha</button>
  <button type="button" id="bind">Enable or rebind</button>
  <button type="button" id="stop">Stop demo handler</button>
  <button type="button" id="reset">Reset</button>
  <p>Handler: <span id="status"></span></p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      let clicks = 0;
      let last = "none";
      function render() {
        $("#result").text(`last=${last} | clicks=${clicks}`);
      }
      function handleClick(event) {
        clicks++;
        last = $(this).text();
        $(this).toggleClass("selected");
        render();
      }
      function bind() {
        $("#items").off("click.demo", ".item")
          .on("click.demo", ".item", handleClick);
        $("#status").text("enabled");
      }
      $("#add").on("click", function () {
        if (!$("#second").length) {
          $("<button>").attr({ type: "button", id: "second" })
            .addClass("item").text("Beta").appendTo("#items");
        }
      });
      $("#trigger").on("click", () => $("#first").trigger("click"));
      $("#bind").on("click", bind);
      $("#stop").on("click", function () {
        $("#items").off("click.demo", ".item");
        $("#status").text("stopped");
      });
      $("#reset").on("click", function () {
        $("#second").remove();
        $("#first").removeClass("selected");
        clicks = 0;
        last = "none";
        bind();
        render();
      });
      bind();
      render();
    });
  </script>
</body>
</html>

초기 Handler는 enabled이고 결과는 다음과 같습니다.

last=none | clicks=0

Alpha를 누르면 last=Alpha | clicks=1과 강조가 생깁니다. Trigger Alpha는 코드로 같은 버튼의 이벤트를 실행하여 횟수를 2로 만들고 강조를 다시 끕니다.
Add Beta 후 Beta를 누르면 last=Beta | clicks=3입니다. 추가 버튼을 반복해 눌러도 second ID를 확인하므로 Beta는 하나입니다.
Enable or rebind를 여러 번 누른 뒤 Alpha를 한 번 누르면 횟수는 4입니다. 같은 처리가 중복 등록되어 한 번에 여러 번 늘어나지 않습니다.
Stop demo handler는 Handler를 stopped로 바꿉니다. 항목을 눌러도 이 실습의 횟수와 강조는 변하지 않습니다. 다시 Enable or rebind를 누르면 재개합니다.
Reset은 Beta와 Alpha의 강조를 지우고 횟수를 0으로 돌린 뒤 핸들러를 켭니다. 다시 Alpha를 누르면 1부터 시작합니다.

동적 버튼과 this·event.target 이해하기

.on()의 이벤트 위임은 존재하는 #items에 한 번 등록하고, 그 안에서 .item에 해당하는 자손의 클릭을 처리합니다. 클릭 이벤트가 부모 쪽으로 전달되는 버블링을 사용하므로, 나중에 추가된 Beta에도 별도 등록이 필요 없습니다. 중간 코드가 버블링을 막으면 부모의 위임 처리에 도달하지 않을 수 있습니다.

일반 함수로 작성한 handleClick의 this는 선택자 .item에 맞는 버튼입니다. Alpha 안의 span을 눌렀을 때 event.target은 안쪽 span일 수 있지만 this는 버튼이므로 버튼 전체의 클래스를 바꿀 수 있습니다. 이 this가 필요할 때 화살표 함수로 무심코 바꾸지 않습니다. 네이티브 button을 사용했으므로 포커스를 둔 뒤 Enter로도 실습의 클릭 처리를 실행할 수 있습니다.

필요한 핸들러만 해제하고 중복 방지하기

.off()에 이벤트 네임스페이스와 같은 위임 선택자를 전달하여 이 실습의 처리만 제거합니다. click.demo에서 click은 이벤트 이름이고 demo는 처리 묶음을 구분하는 이름입니다. 다시 등록하기 전에 .off("click.demo", ".item")를 호출하므로 Enable or rebind를 반복해도 한 번만 처리합니다.

부모의 .off()를 인수 없이 호출하면 그 요소에 등록한 다른 기능의 핸들러까지 제거할 수 있습니다. 제거 범위를 실제 기능에 맞게 제한합니다. Reset은 실습에서 만든 항목·강조·카운터만 정리하고 핸들러를 다시 켜는 방식입니다.

이전 .click() 코드와 실행 결과 비교하기

개발자 도구의 Console에서 아래 부분 코드를 실행하면 화면과 연결하지 않은 두 임시 버튼으로 이전 방식과 권장 방식을 비교합니다. 각각 한 번만 실행되므로 같은 결과가 나옵니다.

let legacy = 0;
const $old = $("<button>").click(() => legacy++);
$old.click();
console.log(legacy);
let modern = 0;
$("<button>").on("click", () => modern++).trigger("click");
console.log(modern);

1
1

.trigger()는 등록된 이벤트 처리를 코드에서 실행하며 버블링도 일으킬 수 있습니다. 실제 사용자 조작을 완전히 재현하는 것은 아니므로 브라우저가 사용자 활성화를 요구하는 동작까지 동일하게 된다고 가정하지 않습니다. 실습에서는 일반 버튼의 카운터와 클래스 처리만 비교합니다.

반응하지 않으면 Network에서 jQuery 로딩, Console에서 오류와 버전을 확인합니다. 선택자가 실제 버튼과 맞는지, 등록 시점에 부모가 있었는지, Stop 상태인지도 확인합니다. 클릭 한 번에 여러 번 실행되면 초기화 때 등록을 반복했는지와 이벤트 해제 범위를 점검합니다.

jQuery