jQuery - 이벤트

jQuery 이벤트

• 기존의 자바스크립트에서 사용했던 이벤트 대부분 사용
• 자바스크립트보다 훨씬 간단하고 쉽게 이벤트 처리 가능

이벤트 사용 기본 구조

• (1) 이벤트 대상 : $('#btn')
• (2) 이벤트 등록 메소드 (이벤트 유형) : click() / click
• (3) 이벤트 핸들러 (이벤트 처리 함수) : function() { ... }

이벤트 등록 메소드 유형(이벤트 적용 방법)

(1) 단독 이벤트 등록 메소드

• 한 동작에 대해 이벤트를 등록할 때 사용하는 메소드
  • 선택자에 직접 이벤트 메소드를 적용하는 방법
  • $('선택자').이벤트유형(실행함수)
  • 동적 연결 지원 안됨

$('#btn').click(function(){ 

});

(2) 그룹 이벤트 등록 메소드 (여러 이벤트 적용)

• 한 번에 여러 개의 이벤트 등록 가능
• 선택자에 on() 메소드를 이용하여 이벤트 종류를 바인딩시키는 방법
• jQuery 1.7 버전 이상부터 지원
• 동적으로 생성된 요소에 적용 가능

$('#btn').on('click mouseover focus', function(){ 

});

이벤트 연결 방식

• 정적 연결

  • 현재 HTML 화면에 있는 태그에만 이벤트 연결
  • jQuery를 통해 새로 삽입되는 태그에는 이벤트 연결 안됨

• 동적 연결

  • 현재 HTML 화면에 표시된 요소와 앞으로 생성될 요소에 전부 이벤트 연결 가능
  • ex) jQuery에서 동적으로 <button id='newBtn'>으로 생성했을 때
  • $document.on('click', '#newBtn', function(){ });로 처리