[8주차] 22. 이벤트 핸들러를 붙이거나 제거 [ bind(), unbind() ]

* bind()를 사용하여 이벤트 핸들러를 붙일시, append()로 추가된 요소에는 이벤트 핸들러가 붙지 않으므로
  새로 추가된 요소에도 이벤트 핸들러가 붙게 하고 싶다면 live(), die()를 대신해서 사용해라

  https://ldgeao99-developer.tistory.com/488

 

1) .bind()

특정 요소에 이벤트 핸들러를 붙여준다.(단, append()로 추가된 다른 요소에는 이벤트 핸들러가 위임되지 않음)

 

2) .unbind()

이벤트 핸들러를 해제한다.(bind()로 설정한 것만 가능. live()로 붙여준건 die()로 해제시켜야 함)

---

두가지 이상의 이벤트에 대해 동일한 작업이 수행되게 하고 싶을 때

$('img').bind('click mouseover', function(){
		alert(1);
});

서로 다른 이벤트에 대해 다른 작업이 수행되게 하고 싶을 때, 처리방법1

// 이미지를 마우스를로 클릭했을 때 실행됨
$('img').click(function(){
	alert(1);
});

// 이미지에 마우스를 올렸을 때 실행됨
$('img').mouseover(function(){
	alert(2);
});

// 이미지에서 마우스를 치웠을 때 실행됨
$('img').mouseout(function(){
	alert(3);
});

서로 다른 이벤트에 대해 다른 작업이 수행되게 하고 싶을 때, 처리방법2

$('img').bind({
	// 이미지를 마우스로 클릭했을 때 때 수행할 일을 정의
	'click' : function(){
		alert(1);
	},

	// 이미지에 마우스를 올렸을 때 수행할 일을 정의
	'mouseover' : function(){ 
		$('img').attr('src', "../images/but2.gif");	
		cnt++;
		if(cnt == 3){
			$('img').unbind(); // bind했던걸 해제하여 이벤트를 못받게 하는.
		}
	},
		
	// 이미지에서 마우스를 치웠을 때 수행할 일을 정의
	'mouseout' : function(){
		$('img').attr('src', "../images/but1.gif");		
	}
});