jquery onclick 예제

onclick 이벤트는 사용자가 요소를 클릭할 때 발생합니다. 다음 예제에서는 클릭 메서드를 ID 선택기와 연결하되 단추 ID를 제공하므로 단추를 클릭하면 클릭 이벤트가 트리거됩니다. 클릭 이벤트 함수에서 hide() 메서드를 사용하여 h2 요소를 숨기고 있습니다. 이 메서드는 처음 두 변형에서 .on(“클릭”, 처리기)에 대한 바로 가기, 세 번째에서는 .trigger(“클릭”)에 대한 바로 가기입니다. 클릭 이벤트는 마우스 포인터가 요소 위에 있고 마우스 단추를 누르고 해제하면 요소로 전송됩니다. 모든 HTML 요소는 이 이벤트를 수신할 수 있습니다. 예를 들어 HTML: .trigger() 이벤트가 발생하면 JavaScript로 바인딩된 이벤트 처리기만 트리거하면 이벤트의 기본 동작이 트리거되지 않습니다. 예를 들어 요소의 클릭 이벤트를 트리거하면 해당 요소의 href으로 자동으로 이동하지 않습니다(그렇게 하는 코드를 작성할 수 있음). 이벤트의 버블링 동작을 사용하면 상위 수준 요소에 처리기를 바인딩한 다음 이벤트를 시작한 하위 수준 요소를 검색하는 “이벤트 위임”을 수행할 수 있습니다. 예를 들어, 정렬되지 않은 목록에 이벤트를 바인딩한 다음 이벤트를 시작한 요소를 확인할 수 있습니다.

그러나 미리 함수를 만들고 변수에 저장한 다음 해당 변수를 이벤트 처리기로 전달할 수 있습니다. 이 기능은 다른 요소의 다른 이벤트 나 이벤트에 대해 동일한 처리기를 사용하려는 경우에 유용합니다. 다음 예제에서는 단락을 클릭하면 숨김이 숨김됩니다. 이것은 click() 메서드를 단락 선택기와 연결했으며 사용자 지정 함수에서 hide() 메서드를 사용하여 현재 요소를 숨기고 있기 때문입니다. 클릭 이벤트 내부의 사용자 지정 기능은 단락을 클릭하면 실행됩니다. jQuery 클릭 이벤트는 html 요소를 클릭할 때 발생합니다. jQuery 클릭() 메서드는 클릭 이벤트를 트리거하는 데 사용됩니다. 예를 들어 $(“p”).click()은 문서(웹 페이지)에서 단락을 클릭하면 클릭 이벤트가 트리거됩니다. click() 메서드에 함수를 연결하여 클릭 이벤트가 발생할 때 함수를 실행할 수 있으며, 이렇게 하면 클릭 이벤트가 트리거될 때마다 코드 조각을 실행할 수 있습니다.

이 가이드에서는 jQuery click() 메서드에 대해 알아봅니다. .on()를 사용하면 한 번에 여러 이벤트에 바인딩할 수 있다는 이점이 있습니다. 예를 들어 사용자가 창을 스크롤하거나 사용자가 창 크기를 조정할 때 동일한 코드를 실행할 수 있습니다. .on() 메서드를 사용하면 공간 분리된 문자열에서 두 이벤트를 모두 전달할 수 있으며, 그 다음에 두 이벤트를 모두 처리하려는

함수를 사용할 수 있습니다. 웹 페이지. 즉, 사용자가 페이지의 특정 부분을 클릭하거나 마우스를 양식 요소 위로 이동할 때 실행되는 코드를 작성할 수 있습니다. 예를 들어 이 코드는 사용자가 페이지의 li 요소를 클릭하도록 수신합니다. 새 항목을 클릭하면 추가 이벤트 바인딩 코드 없이 정상적으로 작동합니다.

이벤트의 기본 동작을 방지하는 경우가 많습니다. 예를 들어 전체 페이지 다시 로드를 트리거하는 대신 AJAX를 사용하여 요소를 클릭할 수 있습니다. 많은 개발자가 이벤트 처리기를 false로 반환하면 이를 달성할 수 있지만 실제로는 의도하지 않은 결과를 초래할 수 있는 이벤트의 전파도 중지합니다. 이벤트의 기본 동작을 방지하는 올바른 방법은 이벤트 개체의 .preventDefault() 메서드를 호출하는 것입니다. 그러나 이렇게 하면 모든 li 요소에 대한 모든 클릭 처리기가 바인딩해제되며 이는 원하는 것이 아닙니다.