jQuery 공작소 : .bind()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

bind 메소드는 동적으로 이벤트를 생성합니다.

예제 1
bind 로 onclick 이벤트 동적 생성
보기
아래 개를 클릭해 보세요. (onclick 이벤트 동적 생성된 예제)
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 20px;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
    }
</style>

<div class="css_test">
    아래 개를 클릭해 보세요. (onclick 이벤트 동적 생성된 예제)<br>
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
</div>

<script type="text/javascript">
    $('.css_test img').bind('click', function(){
        if(this.src == '//superkts.com/img/css/dog061.gif') this.src = '//superkts.com/img/css/dog060.gif';
        else $(this).attr('src', '//superkts.com/img/css/dog061.gif'); // jQuery 로 src 속성값 바꿔보기
    });
</script>
관련 CSS
jQuery

- 두개의 이미지를 번갈아 바꿔보는 예제입니다.
- onclick 이벤트를 붙인다면 on 은 생략하고 click 만 써주면 됩니다.
- 이미지 마다 onclick="코딩" 을 하지 않고 일괄처리 하여 보다 깔끔합니다(?)

bind( 'click', function(){ 코딩 } )

- 위 예제에서 코딩 부분의 this클릭한 이미지 객체 입니다.

예제 2
이벤트 3가지 동시 바인딩
보기
3개의 이벤트 동시 바인딩
마우스 오버, 아웃, 클릭
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 20px;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        position : relative;
    }
</style>

<div class="css_test">
    3개의 이벤트 동시 바인딩<br>
    마우스 오버, 아웃, 클릭<br>
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
</div>

<script type="text/javascript">
    $('.css_test img').bind('mouseover', function(){
        this.src = '//superkts.com/img/css/dog061.gif';
    }).bind('mouseout', function(){
        this.src = '//superkts.com/img/css/dog060.gif';
    }).bind('click', function(){
        $(this).animate({top:'-=70'}, 100, function(){
            $(this).animate({top:'+=70'}, 100, function(){
                this.src = '//superkts.com/img/css/dog021.gif';
            });
        });
    });
</script>
관련 CSS
jQuery

- 아래처럼 줄줄이 엮어서 사용하면 됩니다. (제이쿼리의 장점)

.bind( 'mouseover', function(){ 코딩 } ).bind( 'mouseout', function(){ 코딩 } ).bind( 'click', function(){ 코딩 } )

참고 메서드 : .animate()

예제 3
이벤트 3가지 동시 바인딩, 또 다른 방법
보기
3개의 이벤트 동시 바인딩
마우스 오버, 아웃, 클릭
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 20px;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        position : relative;
    }
</style>

<div class="css_test">
    3개의 이벤트 동시 바인딩<br>
    마우스 오버, 아웃, 클릭<br>
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
</div>

<script type="text/javascript">
    $('.css_test img').bind({
        mouseover : function(){
            this.src = '//superkts.com/img/css/dog061.gif';
        },
        mouseout : function(){
            this.src = '//superkts.com/img/css/dog060.gif';
        },
        click : function(){
            $(this).animate({top:'-=70'}, 100, function(){
                $(this).animate({top:'+=70'}, 100, function(){
                    this.src = '//superkts.com/img/css/dog021.gif';
                });
            });
        }
    });
</script>
관련 CSS
jQuery

- 아래처럼 객체형태로 사용하는 방법도 있습니다.

.bind( {
        mouseover : function(){
                코딩
        },
        mouseout : function(){
                코딩
        },
        click : function(){
                코딩
        }
} )

jQuery 홈페이지 .bind() API 문서 : http://api.jquery.com/bind/