[jQuery] .on()

.on() 메서드는 이벤트 핸들러를 연결하는데 필요한 모든 기능을 제공한다.

*모든 기능이란, 1.7 버전 이전에는 이벤트 핸들러를 사용하기 위해 "bind(), .delegate(), .live()"를 각각 사용했지만, 1.7 버전 이후에는 .on() 메서드 하나로 통합되었다.

 

.blind()

jQuery 이벤트를 다른 함수로 연결(bind)해주는 함수

 

.delegate()

선택한 요소 하위 요소에 이벤트를 등록한다.

 

.live()

아직 생성되지 않은 엘리먼트에도 추후에 생성될 때 이용할 수 있는 이벤트를 미리 걸어둘 수 있다.

 

즉, .on() 메서드는 위 기능을 모두 가지고 있다.

---

사용 방법

// 기본형
$('선택자').on('이벤트 종류', function(){
  실행할 내용
})

// 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 바인딩할 수 있다.
$('선택자').on('mouseenter mouseleaver', function(){
  실행할 내용
})

// 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 바인딩할 수도 있다.
$('선택자').on({
  click: function(){
    실행할 내용
  },
  mouseenter: function(){
    실행할 내용
  },
  mouseleave: function(){
    실행할 내용
  }
});

---

Q. .on('click')과 .click()의 차이는 무엇인가요?

See the Pen [jQuery] Q. on()과 .click()의 차이 by mill (@millfeel) on CodePen.

 각각의 아이템을 클릭했을 때, 아래와 같이 아이템이 추가된다.

각각 추가된 아이템을 클릭했을 경우, .click()은 추가 아이템이 생성되지 않았지만, .on()은 아이템이 추가 되었다.

Q. 차이가 발생하는 이유는 무엇일까?

- on() 메서드가 가진 기능 중에 live() 메서드 기능(아직 생성되지 않은 엘리먼트에도 추후에 생성될 때 이용할 수 있는 이벤트를 미리 걸어둘 수 있다.)이 있기 때문이다.

- 참고로 .click() 메서드는 'click'에 대한 핸들러를 연결하는 역할만 한다.

---

[공부좌표]

[jQuery] .delegate()

jQuery bind(), on(), live(), delegate()

https://api.jquery.com/on/