jQuery 마우스 이벤트

jQuery 마우스 이벤트 onclick() ,bind()

jQuery의 본격적인 이벤트 가장많이 사용하는 마우스 이벤트를 둘러보자. 마우스 이벤트중 가장 많이사용하는 것은 클릭시 발생하는 이벤트이다. 마우스 클릭시 글자가 굵어지게 하는 것을 예제로 보겠다.먼저 사용할 소스를 보자

클릭이벤트
클릭하면 폰트가 크고 굵어진당께

css설정은 클릭하면 생긴 클래스(이름은boxing으로 정했다.)의 폰트가 크고 굵어지도록

.boxing{ font-size:24px; font-weight:bold;}

onclick()

$(document).ready(function(){
	$('p').click.function() {
    /* p엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
     $('p').addClass('boxing');
	});	});

click()이벤트는 위와같이 사용된다.이번엔 여러개의 클릭이벤트를 보자

첫번쨰
두번째
세번쨰

그런데 다음과같이 앞선 본예제와 같이 단순하게 해버리면

$(document).ready(function(){
	$('li').click.function() {
    /* li엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
     $('li').addClass('boxing');
	});	});

결과적으로 클릭했을때 모든 li의 폰트가 굵고 크게 변한다.원하느바는 클릭한것이 변화하는것이다. 첫번째로는 각각 li엘리먼트에 아이디를 주어 클릭시 클래스를 더하고 빼주고 하는방법이다.하지만 이렇게 되면 일일이 아이디를 부여하기에 소스가 복잡해진다. 이때 사용하는것이 This함수이다

$(document).ready(function(){
	$('li').bind('click',function() {
    /* li엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
 	$('li').removeClass('boxing');
    /*먼저 클래스가 있던 없든 클릭한것의 클래스를 지운다*/
	$(this).addClass('boxing');
    /*그 클릭한것(this)의 클래스를 만들어준다.
	});	});

클래스를 만드는것보다 먼저지우는 이유는 그전에 클릭한것의 효과르 없애주기때문이다.페이지 로딩시 처음엔 물론 아무 효과가 없다 하지만 하나를 클릭하고 효과가 적용된후 다른걸 클릭한다고 생각해보자 이때 그전에 클릭한 클래스를 없애주어 효과를 초기화시키기 위해 removeClass()메소드가 먼저 나오는 것이다.

bind()

on click() 말고도 bind()메소드를 이용해 같은 마우스 이벤트를 줄수있다. bind()는 click말고도 여러가지를 지원한다. 더블클릭이라던지, 포거스등 예제로 click dl벤트를 사요하는것만 보자

$('p').bind('click',function() {
     //함수
	});

bind('타입',function(){});이런식으로 지정한다.여기서 타입에따라효과가 달라지는것.앞서말한 포커스라든지 더블클릭.등..

이벤트 예제는 여기로http://sianasiatiger.cafe24.com/study/J_event.html