jQuery에서 버튼 클릭 이벤트 처리

오늘 포스트에서는 jQuery의 버튼 click 이벤트에 대해 알아보겠습니다.

jQuery에서 버튼 클릭 이벤트 처리

jQuery에는 이벤트 핸들러를 JavaScript click 이벤트에 바인딩하거나 요소에서 이 이벤트를 전달하는 통합 .click() 접근 방식이 있습니다.

통사론:

.click(handler).click([eventData], handler)

1. handler는 이벤트가 발생할 때마다 실행되는 기능입니다.
2. eventData는 이벤트 핸들러가 능가할 데이터를 포함하는 객체입니다.

이 메서드는 처음 두 가지 변형에서 .on("click", handler ), 세 번째 변형에서 .trigger( "click" )의 약어입니다. 마우스 포인터가 요소 위에 있는 동안 click 이벤트가 요소로 전송되고 마우스 버튼이 눌러져 실행됩니다.

모든 HTML 요소가 이 이벤트를 수신할 수 있습니다. .click() 메소드는 .on("click", handler )의 약자이므로 .off("click")로 구분할 수 있습니다.

click 이벤트는 다음과 같은 정확한 일련의 이벤트 후에만 전달됩니다.

1. 마우스 포인터가 요소 위에 있는 동안 마우스 버튼을 누릅니다.
2. 마우스 포인터가 요소 위에 있는 동안 마우스 버튼에서 손을 뗍니다.

이것은 일반적으로 작업을 수행하기 전에 원하는 순서입니다. 이것이 필요하지 않은 경우 mousedown 또는 mouseup 이벤트가 더 적절할 수 있습니다.

다음 예를 통해 이해해 봅시다.

<button id="btn">Hello World!</button>

$('#btn').click(() => {console.log('Click event fired')});

위의 예에서 button 요소를 정의했습니다. click 이벤트가 전달되고 버튼을 클릭하는 즉시 함수가 실행됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 아래 결과가 표시됩니다.

출력:

Click event fired

여기에서 데모를 보십시오.