07. jQuery_bind()

📌 jQuery bind() 메서드 정리

✅ 1. 개념

• bind()는 jQuery에서 이벤트를 요소에 연결(바인딩) 할 때 사용하는 메서드입니다.
• 하나의 요소에 여러 이벤트를 동시에 묶어서 처리할 수 있습니다.
• jQuery 3.0 이후로는 on() 메서드로 대체되었으며, bind()는 구버전에서 주로 사용됩니다.

	$(function(){
		cnt = 0;
		// bind : 묶다. 엮어주다. 이어주다
		$('img').bind({ // 두개의 이벤트를 묶어줌
			'mouseover' : function(){ // 마우스 올릴때
				$('img').attr('src', "../images/but2.gif")
				cnt++;
				if(cnt==5)
					$('img').unbind();
			},
			mouseout : function(){ // 마우스를 내릴때
				$('img').attr('src', "../images/but1.gif")
				cnt++;
				if(cnt==5)
					$('img').unbind();
			}
		})	
	})

 

 

• mouseover → 마우스를 올리면 이미지 변경
• mouseout → 마우스를 내리면 원래 이미지로 변경
• 이벤트가 5번 발생하면 unbind()로 이벤트 해제

 

---

✅ 2. 기본 문법

$(선택자).bind(이벤트, 이벤트핸들러);

 

여러 이벤트를 한 번에 바인딩

$(선택자).bind({
    이벤트1 : function(){ ... },
    이벤트2 : function(){ ... }
});

 

---

✅ 4. bind() 특징

1. 여러 이벤트를 한 번에 묶을 수 있음
   → 코드가 간결해짐
2. **이벤트 해제는 unbind()**로 가능
3. jQuery 3.0 이상에서는 더 이상 권장되지 않음
   → 최신 문법은 on() / off() 사용