온클릭 자바스크립트

| | | |

onclick JavaScript 이벤트는 사용자가 버튼이나 다른 웹 요소를 클릭할 때 기능을 수행합니다. 이 방법은 HTML 문서와 JavaScript 문서에서 모두 인라인으로 사용됩니다.

JavaScript로 코딩할 때 사용자가 웹페이지와 상호작용할 때 코드를 실행하려는 경우가 일반적입니다. 예를 들어, 사용자가 버튼을 눌렀을 때 어떤 일이 일어나길 원할 수 있습니다. 하지만 JavaScript에서는 어떻게 되나요?

이 기능을 구현합니다.

여기서 "onclick()" 이벤트가 유용할 수 있습니다. onclick 이벤트는 가장 일반적으로 사용되는 이벤트 유형 중 하나입니다. onclick을 사용하면 사용자가 웹페이지의 버튼이나 기타 요소를 클릭할 때 코드를 실행할 수 있습니다.

이 짧은 가이드에서는 onclick 기능의 작동 방식을 설명합니다. 코드에서 onclick을 사용하여 웹사이트를 대화형으로 만드는 방법을 살펴보겠습니다.

업데이트 이벤트

Onclick은 JavaScript 이벤트의 한 유형입니다. 이벤트는 브라우저에서 발생하는 작업이며 사용자 또는 브라우저 자체에서 시작할 수 있습니다. 사용자가 버튼을 클릭하거나, 양식을 제출하거나, 키보드에서 키를 누르는 것은 모두 실행 중인 이벤트의 예입니다. 이 튜토리얼에서는 사용자가 항목을 클릭하는 첫 번째 항목에 초점을 맞출 것입니다.

개발자는 이벤트를 사용하여 웹 페이지를 대화형으로 만들 수 있습니다. 사용자가 버튼을 클릭할 때 양식을 표시하거나 사용자가 양식을 제출할 때 메시지를 표시할 수 있습니다.

이벤트의 두 가지 주요 구성요소는 이벤트 핸들러와 이벤트 리스너입니다.

버튼을 클릭하거나, 키를 누르거나, 항목 위로 마우스를 가져가면 이벤트가 실행됩니다. 이벤트 핸들러는 이벤트가 시작될 때 실행되는 코드입니다. 예를 들어 버튼을 클릭하면 이벤트 핸들러가 실행됩니다.

리스너 이벤트는 물푸레나무와 md ; 버튼과 같은 항목 - "듣고" 상호 작용할 때까지 기다립니다. 그런 다음 리스너는 이벤트 핸들러를 실행합니다.

JavaScript onclick

JavaScript 이벤트는 버튼이나 다른 웹 요소를 클릭할 때 기능을 수행합니다. 예를 들어, onclick 이벤트로 인해 버튼에 스탬프를 찍을 때 대화 상자가 나타날 수 있습니다.

HTML의 onclick 메서드 구문은 다음과 같습니다.

HTML 버튼을 클릭하면 "codetorun" JavaScript 기능이 실행됩니다. div와 같은 다른 요소와 함께 onclick을 사용할 수 있습니다. onclick은 버튼 전용이 아닙니다.

Simple JavaScript에서도 onclick을 사용할 수 있습니다. 다음은 onclick JavaScript 메소드의 예입니다.

JavaScript 메소드 getElementById 를 사용하여 요소를 검색합니다. 우리 웹 페이지의. id가 "button"인 요소를 클릭하면 onclick 기능이 실행됩니다.

onclick 버튼의 JavaScript 예제

요소 또는 단락을 클릭합니다. onclick 속성을 사용하여 웹사이트에서 이 기능을 구현할 수 있습니다. 버튼과 일부 텍스트가 있는 HTML 페이지부터 시작하겠습니다. 또한 이벤트 코드를 포함할 JavaScript 파일을 만들 것입니다.

이것은 기본 웹 페이지의 예이지만 아직 대화형이 아닙니다. 이 웹페이지가 실행되면 버튼과 일부 텍스트가 표시되지만 버튼을 클릭해도 아무 일도 일어나지 않습니다. 아직 onclick 스크립트 기능을 구현하지 않았기 때문입니다.

이제 웹 페이지가 준비되었으므로 onclick 이벤트 생성을 시작할 수 있습니다. 먼저 onclick() 이벤트 리스너를 버튼에 추가해야 합니다. 이 이벤트는 사용자가 버튼을 클릭할 때 수신합니다.

changeParagraph() 이벤트에 대한 코드를 포함할 "onclick.js" 파일을 생성해 보겠습니다. 이 이벤트는 텍스트를 변경합니다. 단락("p" 요소)을 다른 것으로 변경합니다.

changeParagraph라는 JavaScript 함수 를 정의했습니다. JavaScript querySelector 메소드 를 사용하여 페이지에서 단락을 선택합니다. 페이지를 처음 로드하면 버튼과 "이 텍스트는 버튼을 클릭하면 변경됩니다."라는 텍스트가 표시됩니다.

버튼을 클릭하면 웹 페이지가 변경되고 새 텍스트 : <그림 클래스 = "WP-이미지 블록"> SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd yKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw < / 그림>

개요

일반적으로 웹에서 이벤트 실행을 허용하는 코드는 페이지를 클릭하면 클릭됩니다.

이 그것은! 위의 코드를 사용하여 버튼을 눌렀을 때 코드를 실행할 웹페이지를 성공적으로 만들었습니다. 위의 코드는 텍스트만 변경했지만 원하는 만큼 복잡하거나 간단하게 만들 수 있습니다.

사용자가 버튼을 클릭할 때 알림을 받기를 원하면 경고() 기능을 사용할 수 있습니다. 자바스크립트에서. 코드에 "if" 선언을 추가하려면

자바스크립트 학습에 대한 추가 리소스는 다음을 참조하십시오. JavaScript 학습 가이드 .