본문 바로가기

기타/jQuery

[jQuery] 제이쿼리 이벤트 발생 click, bind, on 사용법

728x90

제이쿼리로 이벤트를 발생시키는 방법에 대해 알아보도록 하겠습니다.

 

1.click 사용법.

$("선택자").click(function(event) { 선택자 눌렀을 때 발생할 이벤트 });

 

2.bind 사용법.

$("선택자").bind("click", function(event) { 클릭했을 때 발생시킬 이벤트 });

 

3.on 사용법.

$("선택자").on("click", function(event) { 클릭했을 때 발생할 이벤트 });
$("상위 선택자").on({click: function(event) { 클릭했을 때 발생할 이벤트 }}, "하위 선택자");
$("상위 선택자").on("click", "하위 선택자", function(event) { 클릭했을 때 발생할 이벤트 });

 

4.예시.

<button id="a">button</button>
<div id="b">

</div>
<script>
    $("#a").click(function (event) {
        $('#b').append('<p>1</p>')
    });

    $("#a").bind("click", function (event) {
        $('#b').append('<p>2</p>')
    });

    $("#a").on("click", function (event) {
        $('#b').append('<p>3</p>')
    });

    $("body").on({
        click: function (event) {
            $('#b').append('<p>4</p>')
        }
    }, "#a");

    $("body").on("click", "#a", function (event) {
        $('#b').append('<p>5</p>')
    });
</script>

728x90