이벤트 연결 범위 한정

이벤트 연결 범위 한정

범위를 한정하는 이벤트 연결 방식

-> delegate 방식

"delegate 방식으로 이벤트를 연결합니다!" -> 이벤트 연결 범위를 한정하는 방법 
on() 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에, 새로 생긴 태그에는 이벤트가 적용되지 않는다. 
이러한 경우, 상위 태그에 이벤트를 연결하고 'h1 태그를 클릭했을 때'를 검출해야 합니다.

<div id="wrap">
	<h1>Header</h1>
</div>

$(document).ready(function() {
	$('#wrap').on('click', 'h1', function() {
		var length= $('h1').length;
		var targetHTML = $(this).html;
		$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');

		// 이벤트를 제거합니다.
		$(#wrap).off('click', 'h1');
	});
});

this 키워드가 #wrap 태그가 아니라 h1 태그라는 것에 주의

상위 개념이 애매한 태그는 다음과 같이 document 객체에 이벤트를 연결한다.

$(document).ready(function() {
	// 이벤트를 연결합니다.
	$(document).on('click', 'h1', function() {});
});