[JavaScript] jQuery 이벤트 메서드

.on(event, handler): 이벤트 리스너를 동적으로 추가한다

$('#checkItems').on('change', function() {
    console.log($(this).is(':checked'));
})

 

.change(handler): 특정 입력 요소의 값이 변경 되었을 때 실행된다

$('#checkItems').change(function() {
    console.log($(this).is(':checked'));
})

 

.click(handler): 클릭 이벤트에 반응한다

$('#selectAll').click(function() {
    console.log('모두 선택 클릭')
})

---

.on(), .click(), .change() 의 차이

 

1. .on()

• 동적으로 추가된 요소에도 이벤트를 바인딩할 수 있음 (이벤트 위임 가능)
• 복잡한 이벤트 바인딩이 필요한 경우 적합

$(document).on('change', '.item', function() {
    console.log('동적으로 추가된 체크박스 상태:', $(this).is(':checked'));
})

 

2. .change() / .click()

• 기존 DOM 요소에만 이벤트를 바인딩
• 동적으로 추가된 요소에는 동작하지 않는다

$('.item').change(function() {
    console.log('기존 체크박스 상태:', $(this).is(':checked'));
})

---

언제 .on() 을 써야할까?

• 페이지가 로드된 후 새로 추가된 DOM 요소에도 이벤트를 바인딩해야 할 때

---

정리

• jQuery에는 addEventListener 대신 .on() 이나 .change() 같은 메서드를 사용한다
• 동적으로 추가된 요소에도 이벤트를 걸어야 한다면 .on() 을 사용하는 것이 가장 좋다