Jquery[제이쿼리] bind(),on() 메서드 배우기

안녕하세요~ 주니주니 입니다.

오늘은  제이쿼리[jquery] bind(),on() 메서드를 배워보겠습니다.
bind(),on() 둘다 이벤트[event] 처리기능을 하는 메서드입니다.
차이점은 bind() 오래된 코드라 먼훗날 사라질꺼라고 하네요.
on() 새로나온 파릇파릇한 녀석이랍니다.

준비하시고! 실행하세요~

실행하니 칙칙한 네모박스가 보이네요.

우선 bind()메서드 부터 해볼까요.
===============================
$('div').bind('click ',function(){
   alert("안녕하세요. 제이쿼리공장장 주니주니입니다.");
   });
===============================

div의 대상이 click 되면  alert()로 안에있는 내용을 출력!
그럼 실행해볼까요?

이렇게 칙칙한 검정색 박스를 클릭하면! 이렇게 이벤트 처리가되어 글이나온답니다.

이번에는 on()메서드를 이용하여 실행해볼까요?

이렇게 똑같은 기능을 한답니다.!

그럼 on()메서드에 대해 좀더 자세히 알아볼까요?
※.on(events,selector,data,function()); 이런 형식으로 되어있습니다.
              1            2         3         4
빨간색 처리되어있는 부분은 있어도그만 없어도 그만인 부분입니다.
즉 필요하면쓰고 필요없으면 안써도 그만입니다. ㅎㅎ
1 = 이벤트들을 나열하면 된답니다. 하나이상의 이벤트를 나열하고싶을 때는
공백으로 구문하면됩니다.
예)'click mouseover'
2 = 자손 요소들을 필터링 할때 사용합니다.
예)':not(#aa)'
3 = 이벤트가 발생했을때 전달하고 싶은 데이터값
예) '{변수명 : 값}' 
4 = 특정 이벤트가 발생했을때 실행될 함수를 지정하며 괄호안에는
이벤트 객체가 매개변수로 전달되므로 이름을 지정해줘야한다.
예) 'function(이름 아무거나)' 
===============================
$('div').on('click mouseover',{data1 :'값넘겨주기!',data2:'값넘겨주기@'},function(e){
   alert("안녕하세요. 제이쿼리공장장 주니주니입니다."+e.data.data1+e.data.data2);
  });
===============================
div가 click이나  mouseover 되면 data1,data2 값을 전달하며 
alert()통하여 전달된값을 확인할수있습니다.

일반적으로 on()메서드를 통하여 주로 처리하는 이벤트는
===============================
키보드 :input,keydown,keyup,keypress
마우스 :click,dblclick,mouseup,mousedown,mouseover,mousemove,mouseout,hover
UI :focus,blur,change
폼 :submit,select,change
브라우저 :error,resize,scroll
문서 :ready,load,unload
===============================
이렇게 있답니다.

실행화면 입니다.!
오늘은 제이쿼리[jquery] bind(),on() 메서드를 배워보았습니다.
다음에 또만나요.. 손가락아파 ㅠ_ㅠ