jQuery를 사용하여 엘리먼트에 이벤트를 적용시켜려면 Bind() 함수를 활용하면 된다.
먼저, 간단한 예를 보면 아래와 같다.
$('input').bind( 'click' , function(event) {
alert('Hello!!');
});
위 이벤트는 " 모든 input 엘리먼트에 click 이벤트 핸들러로 인라인 함수를 바인딩한다. " 라고 정의 한 것이다.
이러한 bind() 함수는 한 엘리먼트에 대해서 이벤트를 여러개 사용할 경우에도 활용할 수 있다.
(ex : 클릭시에는 팝업, 마우스오버는 백그라운드 색상변경 )
물론 자바스크립트를 활용하여 해당 이벤트를 계속적으로 작성할수 있지만,
jQuery의 bind()를 활용하면 보다, 쉽게 작성할 수 있다.
$('SELECTER').bind( {
click : function(event) { click 이벤트 처리 },
mouseover : function(event) { mouseover 이벤트 처리 }
});
mouseover : function(event) { mouseover 이벤트 처리 }
});
위와 같이 여러 이벤트를 생성하지만 하나의 이벤트 처리를 하고 싶은 경우는 아래와 같이 사용하면 된다.
$('SELECTER').bind( { 'click mouseover ' , function(event) {
alert('Hello!!');
});
여기서 주의할점은 위와 같이 다중 이벤트를 선언할 경우, 공백으로 구분된다는 점이다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] each() (0) | 2012.05.10 |
|---|---|
| [jQuery] attr() (0) | 2012.04.25 |
| [jQuery] jQuery.each() vs .each() (1) | 2012.04.24 |
| [jQuery] One() (0) | 2012.03.30 |
| [jQuery] Live() (0) | 2012.03.26 |