[jquery] click() 메서드와 on("click") 메서드의 차이

728x90

목 차

• 1. click() VS on.("click") 비교
• 2. 비교 예제
• 2-1. 정적 요소에 이벤트 바인딩
• 2-2. 동적 요소에 이벤트 바인딩
• 2-3. 다중 이벤트 처리
• 3. 정리

 

1. click() VS on.("click") 비교

특징	click()	on("click")
동적 요소 지원	지원하지 않음	지원 (이벤트 위임 사용 시 가능)
이벤트 위임	불가능	가능 (부모 요소에 이벤트 바인딩)
다중 이벤트 등록	단일 이벤트만 처리 가능	여러 이벤트 유형 등록 가능
사용법 간결성	더 간단한 방식	상대적으로 복잡
권장 여부	간단한 경우 사용 가능	대부분의 경우 권장

 

---

 

 

2. 비교 예제

2-1. 정적 요소에 이벤트 바인딩

// click() 사용
$("button").click(function() {
  alert("Button clicked!");
});

// on() 사용
$("button").on("click", function() {
  alert("Button clicked!");
});

 

 

2-2. 동적 요소에 이벤트 바인딩

// click() - 동작하지 않음
$(".dynamic-button").click(function() {
  alert("Dynamic button clicked!");
});

// on() - 동작함
$(document).on("click", ".dynamic-button", function() {
  alert("Dynamic button clicked!");
});

 

2-3. 다중 이벤트 처리

// click() - 단일 이벤트만 등록 가능
$("button").click(function() {
  alert("Button clicked!");
});

// on() - 여러 이벤트 등록 가능
$("button").on("mouseenter mouseleave", function(event) {
  if (event.type === "mouseenter") {
    $(this).css("background-color", "yellow");
  } else {
    $(this).css("background-color", "");
  }
});

 

---

 

 

3. 정리

• click(): 간단한 클릭 이벤트를 정적 요소에 바인딩할 때 사용. 간결하지만 동적 요소나 복잡한 이벤트 처리에는 부적합합니다.
• on("click"): 정적 및 동적 요소 모두 처리 가능하며, 이벤트 위임, 다중 이벤트 바인딩 등 유연성이 뛰어남. 대부분의 경우 권장.