Jquery 마우스 클릭 이벤트 / .click(), .dblclick()

Jquery - 마우스 클릭 이벤트인 click, dblclick 이벤트 알아보기


.click() 이벤트

이벤트 핸들러를 "click" Javascript 이벤트에 바인드 하거나 요소에서 해당 이벤트를 트리거 한다.

사용 방법은 .on("click", handler), .trigger("click") 이벤트 요소를 사용합니다.

  1. <div id="target">
  2. Click here
  3. </div>
  4. <div id="other">
  5. Trigger the handler
  6. </div>

위 소스의 렌더링 된 HTML 입니다.


이벤트 핸들러를 통해 click 이벤트로 바인딩 하는 예제 입니다.

  1. $( "#target" ).click(function() {
  2. alert( "Handler for .click() called." );
  3. });

target 요소를 클릭할 때 이벤트가 발생되어 alert 문구가 표시 됩니다.


다른 요소를 클릭해 이벤트를 트리거 할 수도 있습니다.

  1. $( "#other" ).click(function() {
  2. $( "#target" ).click();
  3. });

위 클릭 이벤트가 실행되면 트리거된 target 이벤트가 호출 됩니다.


일반적으로 조치를 취하기 전에 원하는 순서대로 지정해서 이벤트를 사용하시면 됩니다.

클릭 이벤트가 필요하지 않은 경우 mousedown 또는 mouseup 이벤트가 더 적합할 수 있습니다.


.dblclick() 이벤트

다음은 dblclick() 이벤트 입니다.

마우스를 더블클릭 했을 때 이벤트가 발생 됩니다.

.on("dblclick", handler), .trigger("dblclick") 함수로 사용할 수 있습니다.

  1. <div id="target">
  2. Double-click here
  3. </div>
  4. <div id="other">
  5. Trigger the handler
  6. </div>


위 소스의 렌더링 된 HTML 입니다.


이벤트 핸들러를 통해 dblclick 이벤트로 바인딩 하는 예제 입니다.

  1. $( "#target" ).dblclick(function() {
  2. alert( "Handler for .dblclick() called." );
  3. });

target 요소를 더블클릭할 때 이벤트가 발생되어 alert 문구가 표시 됩니다.


다른 요소를 클릭해 이벤트를 트리거 할 수도 있습니다.

target 요소를 더블클릭하는 트리거를 생성하는 예제 입니다.

  1. $( "#other" ).click(function() {
  2. $( "#target" ).dblclick();
  3. });

other 요소의 클릭이벤트로 target 요소를 더블클릭 합니다.

핸들러를 동일한 요소에 대한 click및 dblclick이벤트 모두에 바인드하지 않는 것이 좋습니다 . 트리거되는 이벤트 순서는 브라우저마다 다르며 일부는 click이전에 두 개의 이벤트를 수신 dblclick하고 다른 하나는 하나만 수신 합니다 . 두 번 클릭 감도 (더블 클릭으로 감지되는 최대 클릭 시간)는 운영 체제와 브라우저에 따라 다를 수 있으며 종종 사용자가 구성 할 수 있습니다.


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성

관련 블로그 구경하기

작성자의 다른 포스팅