Javascript & JQuery & CSS

이번 장에서는 jQuery 에서 bind(), .delegate(), .live(), .on() 함수에 대해서 알아보겠습니다.

jQuery의 이벤트 바인딩 메소드는 조금 많습니다.

비슷한 기능을 하는데 메소드가 많으니 어떤걸 써야 하나 햇깔리기 마련이지요..

나중이 또 햇깔리니깐 이참에 정리 해야 겠습니다.
1. bind()

.bind( 이벤트타입, [, 이벤트 데이터], 핸들러(이벤트객체) )

.bind() 메소드는 기본적으로 엘리먼트에 이벤트를 바인딩(선언, 할당)을 해준다. 이벤트 타입은 클릭, 마우스오버/아웃 등등~

다양한 브라우저의 이벤트들이 들어가고, 이벤트 데이터 추가 데이터인데 잘 쓰이지 않으니 패스~~~~ 옵션이다.

마지막으로 핸들러는 해당 이벤트가 감지 될 때 실행 될 함수(명령어들)이 되겠다.

여기서 햇갈리는건 .click() 같은 메소드들이다.
 

	$('a').bind('click',function(){
		alert('클릭!');
	});

	$('a').click(function(){
		alert('클릭!');
	});

위의 예제 2가지는 bind() 과 click() 이벤트에 대한 표현 방법 이다.

위의 예처럼 .bind()와 .click()의 차이는 무엇일까?

결론부터 말하자면, 차이가 없다!

.click()은 .bind('click') 이란걸 쓰기 쉽게 click으로 표기해 둔 것과 같다. click 이벤트는 자주 쓰니 보기 좋게~ .click() 메소드로 빼둔것!

.mouseover() 라던가, .keyup()등도 .bind()를 쓰기 쉽게 메소드로 빼둔것 뿐이다. 결론은 어떻게 쓰던 같다.

2. delegate()

.delegate( 셀렉터, 이벤트타입, 핸들러(이벤트객체) )

부모의 엘리먼트에서 발생한 이벤트는 자식에게까지 전해지는데, 이때 어떤 자식인지 체크해서 필터를 해주는 기능이 되겠다.

bind()처럼 예로 보면서 풀면 쉬운데,
 

			$('div').bind('click',function(e){
				if(e.taget.tagName=='a') alert('클릭!');
			});

			$('div').delegate('a','click',function(){
				alert('클릭!');
			});

위 두개의 소스는 기능상에 차이가 없다. 그냥 둘중에 마음에 드는걸 쓰면 되는거다.

다만 차이가 있다면, 위의 .bind()에서는 this의 포인터가 div가 되고, .delegate()에서의 this는 a가 되겠다.

어찌되었건 위의 .click()의 예처럼 .bind( 어쩌고 저쩌고 )를 쓰기 쉽게 .delegate()로 해둔거다.

3. live()

위에 설명했던 .bind()는 동적 엘리먼트에 대한 이벤트 바인딩은 안된다.
 
jQuery를 통해 .append('클릭') 등과 같이 동적으로 생성되었다면, .bind()를 바인딩하는 시점에 없었던애니깐 새롭게 바인딩 하진 않는다.
  
하지만, 동적으로 생성된것도 이벤트가 필요할 경우가 있는데 이때 .live()라는 메소드가 우리를 구원해준다!~


.live( 이벤트, 핸들러(이벤트객체) )

사용법은 .bind()와 같지만 메소드 이름처럼~ 실시간! 바인딩이 가능하다.


4. on()
.on( 이벤트 [, 셀렉터 ] [, 데이터 ], 핸들러(이벤트객체) )

jQuery에서 이벤트를 바인딩 하는데 많은 방법이 존재해서 햇깔린다.

그래서 햇깔리지 말라고 통합 이벤트 바인딩 메소드인 .on()을 1.7에서 추가 해 주었다. (그랬더니 더 햇깔리네 ㅎㅎ)

결론은 .on()은 .delegate() + .live() 버전이 되겠다.

그래서 1.7 이상의 버전을 사용중이고, 동적 바인딩을 요한다면,
 

			$(document).on('click','a',function(){
			    alert('클릭!');
			});
			

 

	$("#test1 li a" ).on("click", function() {
		alert("click 하였습니다.");
	});

 

	$("#select1").on({
		"click": function() { 
			alert("selected1 을 click 하였습니다");
		},
		"change":function() { 
			alert("selected1 을 change 하였습니다");
		}
	});


	//아래와 같은 형태로도 사용할 수 있다.

	$( "div.test" ).on({
		click: function() {	alert("click");	}, 
		mouseenter: function() { alert("mouseenter"); }, 
		mouseleave: function() { alert("mouseleave"); }
	});

 

	function notify() {
	  alert( "clicked" );
	}

	$( "button" ).on( "click", notify );

 

	function greet( event ) {
	  alert( "Hello " + event.data.name );
	}

	$( ".btnsubmit" ).on( "click", {
	  name: "Karl"
	}, greet );

	$( ".btnsubmit" ).on( "click", {
	  name: "Addy"
	}, greet );

	//위와 같은 형태로 데이터를 넘길 수 있습니다.

이와같은 여러가지 형태로 사용이 가능합니다.

동적인 바인딩이기에 굳이 $(document).ready() 안에 있을 필요도 없다.

마지막으로 정리하자면,
 

			.bind() 와 .delegate() 는 이벤트 바인딩을 하는 기능은 같지만 this의 포인터가 다르다.

			.live()는 동적으로 이벤트를 바인딩 해준다.

			.on()은 1.7 이상 버전에서 나온 3가지 통합 메소드이다.

			1.7이상이면 고민말고 .on()을 써주자~