jQuery의 범용 메서드 on

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

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

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

CSS는 다음과 같습니다:

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

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

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

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

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

모든 링크에 이벤트를 바인딩하세요 - 링크에 마우스를 올리면 링크 텍스트 끝에 그것의 href를 괄호 안에 추가합니다.

모든 입력 필드에 이벤트를 바인딩하세요 - 포커스를 잃을 때 각 입력 필드는 자신의 value를 id=#test인 단락에 출력합니다.