JQuery, bind 함수 / on 함수

bind 함수

기본 형식

 

$("요소").bind("이벤트", function() {
    ... 이벤트 처리 ...
});

$('#login').bind('submit', function(){
	$('#pwdDiv').empty();

 

이벤트 이름을 공백으로 구분하여 여러개 지정

 

$("요소").bind( "이벤트1 이벤트2 이벤트3", function() { 
    ... 이벤트 처리 ...
});

$('#login').bind('submit click', function(){
	$('#pwdDiv').empty();

 

JSON 형식

$("요소").bind({
    "이벤트1" : function() { ... 이벤트 처리 ...},
    "이벤트2" : function() { ... 이벤트 처리 ...},
    "이벤트3" : function() { ... 이벤트 처리 ...}
});

$('#user_id, #user_pw').bind({
	'focus' : function(){
		$(this).addClass('active')
	},
    
	'blur' : function(){
		$(this).removeClass('active')
	}
});

---

예시

$('#demo2 li').bind('click', function(){
	alert($(this).text())
})

$('#demo2 button').bind('click', function(){
	$('#demo2 li').unbind('click');
	
	$('#demo2 ul').append('<li>added</li>').find($('li')).click(function(){
		alert($(this).text());
	})
})

 

unbind('click');
클릭 이벤트를 모두 삭제

 

.append('<li>added</li>').find($('li')).click(function(){
li를 추가하고 원래부터 추가된 애들까지 li를 찾아서 li를 클릭했을 때 alert 띄워지기

---

이벤트는 원본의 태그만 적용된다.
따라서, 새로 추가된 것들(동적으로 추가된 태그들)은 이벤트가 적용이 되지 않는다.

 

이때 사용하는게 on 함수이다.

---

bind 보다 on을 사용하라고 권장

bind로 연결된 이벤트는 unbind()로 제거하고, on로 연결된 이벤트는 off()로 제거한다.

on 함수

 

$(선택자).on( events [,selector] [,data], handler( eventObject ) )

$(선택자).on(이벤트타입 [,자손선택자]  [,데이터], 핸들러())

events	공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스
selector	이벤트가 발생할 요소들의 자손을 찾는 선택자 선택자가 null 이거나 생략됐다면 이벤트는 선택된 요소에 한해서 반응한다.
data	이벤트가 발생할 때 핸들러에 전달할 데이터
handler(eventObject)	이벤트가 발생되면 실행될 기능.  false를 반환하는 함수라면 간단하게 false를 직접 인자로 하면 된다.

 

예시

$('#demo2 button').on('click', function(){
	$('ul').append('<li>added</li>');
});

$(document).on('click', 'li', function(){
	alert($(this).text())
})