[JQUERY] 어느 버튼을 클릭하였는지 확인하기

어느 버튼을 클릭하였는지 확인하기

특정 버튼 중에서 클릭한 버튼을 확인할 수 있습니다.

1. 샘플예제

Bold button Italic button

실행결과

2. 소스코드

<%----javascript start-----------------------------------------------------%>

<script type="text/javascript">

$(document).ready(function(){

$(".buttons").bind("click", function(){

alert("click " + $(this).text());

});

// $(".buttons").click( function(){

// alert("click " + $(this).text());

// });

$(".buttons").bind("dblclick", function(){

alert("double-click " + $(this).text());

});

// $(".buttons").dblclick( function(){

// alert("double-click " + $(this).text());

// });

// $(".buttons").click( function(){

// alert("click " + $(this).text());

// });

});

</script>

<%----javascript end-----------------------------------------------------%>

<%----HTML start---------------------------------------------------------%>

<span class = "buttons">Bold button</span>

<span class = "buttons">Italic button</span>

<%----HTML end-----------------------------------------------------------%>

3. 설명

1) 버튼에 click(dblclick)이벤트를 bind 및 직접 이벤트를 설정합니다.

2) 이벤트가 제대로 적용이 되면 해당 버튼을 클릭하게 되면 설정한 이벤트가 실행합니다.

JQUERY 참조 : http://api.jquery.com/bind/

                   http://api.jquery.com/click/

                   http://api.jquery.com/dblclick/

- bind(eventType, data, handler)

  : 특정 이벤트를 정의하여 설정한다.

  : eventType는 이벤트의 타입을 지정하는 문자열로써 click, dblclick, focus, blur등등

  : data는 이벤트 핸들러에 전달할 데이터로써 생략하면 데이터 대신 이벤트 핸들러 함수가 된다.

  : handler는 이벤트가 발생하면 수행할 문장들을 가진 함수

- click(handler)

  : 클릭 이벤트를 직접 정의한다.

  : handler는 이벤트가 발생하면 수행할 문장들을 가진 함수

  

- dblclick(handler)

  : 더블클릭 이벤트를 직접 정의한다.

  : handler는 이벤트가 발생하면 수행할 문장들을 가진 함수