[JQuery] on 함수

📌 on 함수란?

• 하나의 요소에 여러 이벤트를 동시에 적용할 수 있는 jQuery 메서드

 

✅ 여러 요소에 동일 이벤트 적용

$("#box01, #box02").on("click", function() {
    alert($("#box01").val() + $("#box02").val());
});

 

• #box01, #box02 두 요소에 동시에 click 이벤트를 적용
• click 시 두 요소의 값을 합쳐서 알림(alert) 표시

 

 

✅ 여러 이벤트를 한 요소에 적용

$(selector).on({ 
    click: function() { 
        // 클릭 시 실행할 함수 
    },
    change: function() { 
        // 변경 시 실행할 함수 
    },
    mouseenter: function() { 
        // 마우스 엔터 시 실행할 함수 
    }
});

 

• click, change, mouseenter 등 여러 이벤트를 한 번에 지정 가능
• 각 이벤트마다 별도의 함수를 설정 가능