jQuery : on('이벤트')와 .이벤트의 차이점

jQuery에서 요소에 이벤트를 할당할 때 두 가지 선택지가 있음.

// on('이벤트')
$('.btn').on('click', () => {
  alert('바보');
});

// .이벤트
$('.btn').click(() => {
  alert('바보');
});

  1. on('이벤트')

  2. .이벤트

 

두 문법은 완벽하게 똑같지 않음.

on이 글자를 조금 더 쓰는 대신 기능이 추가됨.

 

차이점이라고는 적었지만,

결국 on('이벤트')가 무엇을 할 수 있는지에 대한 내용임.

 

이벤트 여러 개 할당

$(요소).on('click mouseenter', function() {
// 클릭 또는 마우스 진입 시 실행
});

on 메서드는 여러 이벤트를 동시에 할당할 수 있음.

 

'.이벤트'로 적으면 이런거 안됨.

 

동적 이벤트 할당

$('btn-block').on('click', '.btn', function() {
// 동적으로 추가된 버튼에 클릭 이벤트 처리
});

on 메서드 사용하면

js 코드로 만들어낸 새로운 요소에도 이벤트 할당 할 수 있음.

 

부모 요소에 이벤트 할당하고

"이런 자식 생기면 걔한테도 이벤트 할당하세요~" 하는 느낌임.

 

'.이벤트'로 적으면 이런거 안됨.

 

커스텀 이벤트 할당

$(요소).on('myCustomEvent', function() {
// 커스텀 이벤트 처리
});

쓸 일 없을 것 같지만 이것도 '.이벤트'로 안된다고 함.