JQuery day14

on() | off() | one()

이벤트 바인딩

이벤트는 특정 이벤트는 처리하는 이벤트 핸들러 함수와 요소를 연결하는 역할을 해주는 이벤트 바인딩이라는 개념이 있다.

이벤트 바인딩 메소드의 종류

종류	설명
on()	이벤트 핸들러 함수와 요소를 연결하여 이벤트 사용을 정상적으로 허용한다.
off()	바인딩을 제거하여 이벤트 사용을 제한한다.
one()	이벤트 핸들러가 딱 한번만 실행되고 더 이상 실행하지 않는다.

예제코드

<p><button>버튼</button></p>
<style>
    button{
        width: 200px;
        height: 60px;
        font-size: 30px;
        font-weight: 900;
        border: 1px solid grey;
    }
    button.on{
        background-color: black;
        color: white;
    }
</style>

on()

$(function(){
    $('button').on('click', function(){
        $(this).addClass('on');
    })
});

off()

$(function(){
    $('button').off('click', function(){
        $(this).addClass('on');
    })
});

one()

$(function(){
    $('button').off('click', function(){
        $(this).addClass('on'); 
    })
});