jQuery 마우스 이벤트

jQuery/DOM&jQuery 2009.10.19 16:30

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


설정

트랙백

댓글

  • cosmos 2011.02.17 13:00 ADDR 수정/삭제 답글

    bind()메소드를 왜 사용하는지 이해가 잘 안갑니다. 그냥 click()만으로도 작동이 되는것 같은데 왜 굳이 bind()를 사용해서 작성해야 하는지 궁금해요?

    • Favicon of https://siana.tistory.com 샷타이거 2011.02.17 16:11 신고 수정/삭제

      이벤트 순차에따른 버블링때문에 사용하고 안하고 합니다. 제 블로그에서 버블링이라고 검색하고 뜨는 두가지포스팅을 읽어보시면 도움 될껍니다.

      간단히설명하자면 click()의경우 여러번 사용 할 경우 이벤트 처리 부작용으로 시간이 걸리고 오류나는경우가 있죠. 올려진 예제는 간단한 겁니다만, 복잡할경우 문제가 생기는 거지요.

      bind()를 사용하고 unbind로 확실하게 이벤트를 끝내줌으로서 이런 부작용을 막는거지요