.on()

jQuery의 .on() 메서드는 이벤트 핸들러 함수를 연결하는 데 사용됩니다. 이 메서드는 선택한 요소의 자식 요소에도 이벤트 핸들러를 적용할 수 있습니다.

예를 들어, 다음과 같이 HTML 코드가 있다고 가정해 봅시다:

<button id="myButton">클릭하세요</button>

그리고 다음과 같은 JavaScript 코드를 작성한다면:

$("#myButton").on("click", function() {
  alert("버튼이 클릭되었습니다.");
});

이제 버튼을 클릭할 때마다 "버튼이 클릭되었습니다."라는 경고 창이 나타납니다. .on() 메서드는 이벤트 유형("click")과 이벤트 핸들러 함수를 인수로 받습니다. 이벤트 핸들러 함수는 이벤트가 발생했을 때 실행됩니다.

.on() 메서드는 다음과 같이 두 개 이상의 인수를 사용하여 여러 이벤트 유형에 대해 하나의 이벤트 핸들러 함수를 등록할 수도 있습니다:

$("#myButton").on("mouseenter mouseleave", function() {
  $(this).toggleClass("highlight");
});

이 예제에서는 "mouseenter" 및 "mouseleave" 이벤트에 대해 하나의 이벤트 핸들러 함수가 등록됩니다. 이벤트 핸들러 함수는 버튼 위로 마우스를 가져갈 때 "highlight" 클래스를 추가하고, 마우스가 버튼에서 벗어날 때 "highlight" 클래스를 제거합니다.