jQuery의 범용 메서드 on

이벤트를 바인딩하기 위해 범용 메서드 on도 사용할 수 있습니다. 첫 번째 매개변수로 이벤트 이름(예: 'click')을 받고, 두 번째로는 바인딩할 함수를 받습니다.

다음 HTML 코드로 예를 살펴보겠습니다:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

CSS는 다음과 같습니다:

cssli {
  width: 100px;
  cursor: pointer;
}

이제 이전에 작성한 li에 대한 코드를 on 메서드를 사용하여 다시 작성해 보겠습니다. 동작을 확인하려면 리스트 항목을 클릭해 보세요:

javascript$('li').on('click', function() {
  $(this).append('!');
});

하나의 함수를 여러 이벤트 유형에 동시에 바인딩할 수 있습니다. 이를 위해 이벤트들을 공백으로 구분하여 나열하면 됩니다: 'click mousemove 등'. 예를 들면 다음과 같습니다:

javascript$('li').on('click mousemove', function func() {
  $(this).append('!');
});