예제와 함께 설명하는 JQuery의 OnClick 함수

JavaScript의 빠르고 작고 기능이 풍부한 라이브러리 중 하나는 jQuery입니다. jQuery는 HTML 문서, 이벤트 처리, 순회 및 조작 등을 만드는 데 사용됩니다.

HTML 요소를 클릭할 때마다 jQuery 클릭 이벤트가 발생합니다. jQuery에서 onclick 함수 를 트리거하기 위해 click() 메소드가 사용됩니다. 예를 들어 문서의 단락을 클릭하면 $("p").click() 메서드에 의해 클릭 이벤트가 트리거됩니다. 사용자는 함수를 실행하기 위해 클릭 이벤트가 발생할 때마다 클릭 메소드에 함수를 첨부할 수 있습니다. 이에 따라 click() 이벤트가 트리거될 때마다 코드가 실행됩니다.

마우스 클릭은 HTMLElement.click() 메서드를 통해 시뮬레이션됩니다.

Click() 함수는 클릭 이벤트를 시작하는 jQuery의 내장 함수입니다. 관련 요소를 클릭할 때마다 click() 메서드에 의해 이벤트가 발생합니다. 그런 다음 그의 이벤트는 문서 트리(또는 이벤트 체인)에서 상위 요소의 클릭 이벤트를 발생시킵니다.

이름에서 알 수 있듯이 사용자가 요소 위에서 마우스 버튼을 눌렀다 떼기만 하면 됩니다.

하나 이상의 이벤트 핸들러가 on() 메소드를 통해 선택된 요소에 연결됩니다. 요소를 클릭하면 click() 이벤트가 발생합니다. click() 이벤트가 발생하면 click() 메서드가 실행됩니다. 함수는 click() 메서드에 첨부되어 실행됩니다. click() 메서드는 jQuery의 다른 이벤트와 함께 사용됩니다.

따라서 .click()은 이벤트 핸들러를 JavaScript 이벤트 "click"에 바인딩하거나 요소에 대한 이벤트를 트리거합니다. JavaScript onclick 메소드 의 변형은 다음 과 같습니다.

1. .click( 핸들러 ).
2. .click( [eventData ], 핸들러).
3. .딸깍 하는 소리().

첫 번째와 두 번째 변형은 마지막 변형에서 .on( "click", handler )의 약식과 .trigger( "click" )의 바로 가기입니다.

마우스 포인터가 요소 위에 있고 버튼을 눌렀다가 놓을 때마다 이벤트 click()이 해당 요소로 전송됩니다. 이벤트는 HTML의 모든 요소에서 수신할 수 있습니다.

Click() 이벤트는 다음 코드를 통해 다른 요소를 클릭하는 경우에도 트리거될 수 있습니다.

이 코드를 사용하면 메시지가 요소에 의해 경고됩니다.

다음 이벤트를 통해 click() 이벤트만 트리거됩니다.

• 마우스 포인터가 요소 내부에 있을 때 마우스 버튼을 눌렀을 때.
• 마우스 포인터가 요소 내부에 있고 마우스 버튼을 놓을 때.

조치를 취하기 전에 위에서 언급한 이벤트는 일반적으로 원하는 순서입니다. 그렇지 않으면, 다른 적절한 이벤트는 마우스 다운 또는 마우스 업 이벤트입니다.

.click() 메서드가 .on( "click", handler )의 단축키이기 때문에 .off( "click" )를 사용하여 분리할 가능성이 있습니다.

용법

click() 메서드를 호출하는 데 사용할 수 있는 두 가지 방법이 있습니다.

• 주어진 함수 인수로
• 주어진 인수 없이

jQuery 의 onclick 기능 은 원하는 작업을 수행하기 위해 div, 단락, 하이퍼링크 등과 같은 HTML 요소에서 사용할 수 있습니다. 클릭은 마우스 버튼을 눌렀을 때 발생하는 마우스 이벤트입니다. 그러나 마우스 포인터가 요소 내에 있으면 이벤트가 발생합니다.

통사론:

$(선택기).click() ; -> 선택한 요소에 대한 클릭 이벤트를 트리거하는 데 사용됩니다.

$(선택기).click(함수); -> 클릭 이벤트에 함수를 붙일 때 사용합니다.

• 사용되는 선택적 매개변수는 클릭 이벤트 발생 시 실행에 사용되는 "함수"입니다.
• 반환 값: 수행할 기능으로 지정된 선택된 요소가 반환됩니다.

click() 메소드 구현

1. 함수 인수가 주어졌을 때

이러한 유형의 구현에서 함수 는 입력으로 사용되며 click() 메서드가 호출될 때마다 실행됩니다.

• 코드 작성은 스크립트 태그 사이와 코드의 HTML 본문 내에 있습니다.
• 함수 호출은 h1 스타일 속성으로 수행됩니다.
• 인수는 함수 와 함께 선언되며 별도로 함수로 사용됩니다.
• 메서드 토글 은 1000ms 지연으로 이 연산자를 사용하여 개체에 적용됩니다 .
• 주어진 함수 인수를 사용하는 구현 방법의 예는 다음과 같습니다.

코드의 출력은 "나를 클릭하면 텍스트가 토글됩니다!"가 됩니다.

2. 인수가 없을 때

javascript onclick 메소드는 onclick 이벤트를 발생 요소가 이미 메서드에 할당되어 있습니다. 따라서 요소는 다른 요소의 onclick 이벤트 를 별도로 호출할 수 있습니다. 이것은 다음 단계를 통해 달성할 수 있습니다.

1. 개체는 클릭 가능한 특정 스타일의 속성으로 먼저 선언되어야 합니다. 개체 에 대해 onclick 작업을 선언해야 합니다.
2. 다른 스타일의 형식인 p 에 대해 click() 메서드의 속성이 수행 되는 코드 본문 에 스크립트 블록이 생성됩니다 .
3. 이미 정의된 h1 onclick 메소드는 함수 호출 내에서 호출됩니다.
4. 그런 다음 속성에 대해 동일한 onclick 메서드가 호출됩니다.
5. 주어진 인수 없이 click() 메서드의 구현을 보여주는 코드의 예가 아래에 나와 있습니다.

코드의 출력은 "나를 클릭하면 경고가 호출됩니다!"입니다.

• • $.on 메소드에서는 dblclick, change 등과 같은 많은 이벤트를 사용할 수 있습니다.

3. HTML 버튼을 렌더링하고 버튼을 클릭하면 페이지에 텍스트를 추가합니다. Click() 메서드는 가장 일반적으로 버튼에 연결되지만 웹 페이지의 다른 요소에도 연결할 수 있습니다.

• • 기본 버튼은 id가 "main"인 <div> 안에 있는 "btn-primary"의 id로 렌더링됩니다.
  • 코드를 통해 버튼 클릭 후 <p> 태그에 "new content" 클래스와 함께 새 콘텐츠가 표시됩니다.
  • jQuery는 <script> 태그로 묶입니다.

• • click() 메서드는 버튼의 id에 연결되고 인수는 익명 함수인 콜백 함수로 사용됩니다.
  • 콜백 함수에서 "Button clicked" 문자열이 반환됩니다.

• • 이름이 없는 함수는 단순히 익명 함수라고 하며 메서드의 인수로 콜백으로 사용됩니다. 반응형 웹사이트와 애플리케이션을 구축하기 위해 익명 함수와 콜백 메서드는 초석 역할을 합니다.

• • 코드는 <div> "main" 내부의 버튼으로 시작합니다.
  • 버튼을 클릭하면 click() 메서드가 버튼 선택기에 연결될 때 콜백 함수가 이벤트 핸들러에 의해 호출됩니다.
  • "Button clicked" 문자열이 표시됩니다.
  • 위의 코드는 콘텐츠를 한 번만 렌더링하지만 코드를 클릭할 때마다 문자열을 표시하기 위해 HTML() 대신 append()를 사용합니다.

• • <p> 태그 내부의 새 콘텐츠로 문자열을 세 번 생성합니다.
  • 버튼을 클릭할 때마다 콜백 함수가 호출됩니다.

결론

jquery 에서 onclick 함수의 기능은 사용 및 예제 와 함께 기사에서 논의되었습니다 . 몇 줄의 코드만으로 JavaScript onclick 메서드를 통해 웹 페이지 기능을 만들 수 있습니다.

웹 개발에 대해 더 많이 배우고 다른 관련 분야의 전문 지식을 얻고 싶다면 upGrad 에서 제공하는 "컴퓨터 공학 석사 " 과정을 확인할 수 있습니다. 초급 전문가(21세에서 45세 사이의 남녀 모두)를 위해 특별히 설계된 이 과정은 장거리 통근자들의 편의를 위해 라이브 세션이 있는 온라인 플랫폼에서 진행됩니다. 30개 이상의 프로젝트와 과제를 통해 학생은 IIIT-방갈로르 및 LJMU 동문 자격 의 혜택을 받게 됩니다. 도움이 필요하시면 언제든지 저희 팀에 문의하십시오.