JavaScript onclick 이벤트는 사용자가 버튼이나 다른 웹 요소를 클릭할 때 기능을 실행합니다. 이 방법은 HTML 문서와 JavaScript 문서 모두에서 인라인으로 사용됩니다.
JavaScript로 코딩할 때 사용자가 웹 페이지와 상호 작용할 때 코드를 실행하려는 것이 일반적입니다. 예를 들어, 사용자가 버튼을 눌렀을 때 어떤 일이 일어나길 원할 수 있습니다. 그러나 JavaScript에서 이 기능을 어떻게 구현합니까?
여기에서 "onclick()" 이벤트가 유용할 수 있습니다. onclick 이벤트는 가장 일반적으로 사용되는 이벤트 유형 중 하나입니다. onclick을 사용하면 사용자가 웹페이지의 버튼이나 다른 요소를 클릭할 때 코드를 실행할 수 있습니다.
이 짧은 가이드에서는 onclick 기능이 작동하는 방식을 분석할 것입니다. 코드에서 onclick을 사용하여 웹사이트를 대화형으로 만드는 방법에 대해 논의할 것입니다.
이벤트 새로고침
Onclick은 일종의 JavaScript 이벤트입니다. 이벤트는 사용자 또는 브라우저 자체에서 시작할 수 있는 브라우저에서 발생하는 작업입니다. 사용자가 버튼을 클릭하거나, 양식을 제출하거나, 키보드에서 키를 누르는 것은 모두 실행 중인 이벤트의 예입니다. 이 튜토리얼에서는 첫 번째 요소인 사용자가 요소를 클릭하는 것에 초점을 맞출 것입니다.
개발자는 이벤트를 사용하여 웹 페이지를 대화형으로 만들 수 있습니다. 사용자가 버튼을 클릭할 때 양식을 표시하거나 사용자가 양식을 제출할 때 메시지를 표시할 수 있습니다.
이벤트에는 이벤트 핸들러와 이벤트 리스너의 두 가지 주요 구성 요소가 있습니다.
버튼을 클릭하거나 키를 누르거나 요소 위로 마우스를 가져가면 이벤트가 실행됩니다. 이벤트 핸들러는 이벤트가 시작될 때 실행되는 코드입니다. 예를 들어 버튼을 클릭하면 이벤트 핸들러가 실행됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이벤트 리스너는 "듣고" 상호 작용할 때까지 대기하는 버튼과 같은 요소의 일부입니다. 그러면 리스너는 이벤트 핸들러를 실행합니다.
자바스크립트 클릭 시
JavaScript onclick 이벤트는 버튼이나 다른 웹 요소를 클릭할 때 기능을 실행합니다. 예를 들어, onclick 이벤트는 버튼을 클릭할 때 표시되는 대화 상자를 트리거할 수 있습니다.
다음은 HTML의 onclick 메소드 구문입니다.
<button onclick="codetorun">Click me</button>
이 HTML 버튼을 클릭하면 "codetorun" JavaScript 기능이 실행됩니다. div와 같은 다른 요소와 함께 onclick을 사용할 수 있습니다. onclick은 버튼에만 국한되지 않습니다.
일반 JavaScript에서 onclick을 사용할 수도 있습니다. 다음은 JavaScript onclick 메소드의 예입니다.
var item = document.getElementById("button");
item.onclick = function() {
codetoexecute...
} JavaScript getElementById 메소드를 사용하여 웹 페이지에서 요소를 검색합니다. ID가 "버튼"인 요소를 클릭하면 onclick 기능이 실행됩니다.
버튼 클릭 자바스크립트 예제
p 요소 또는 단락을 클릭한 후 웹 페이지의 일부 텍스트를 변경하려고 한다고 가정해 보겠습니다. onclick 속성을 사용하여 웹사이트에서 이 기능을 구현할 수 있습니다. 버튼과 일부 텍스트가 있는 HTML 페이지부터 시작하겠습니다. 이벤트 코드를 저장할 JavaScript 파일도 생성합니다.
index.html <!DOCTYPE html> <html> <head> <title>onclick example</title> </head> <!-- Main body of code --> <body> <button>Click here.</button> <p>This text will change when you click the button.</p> </body> <!-- Reference our JavaScript event code --> <script src=”js/onclick.js”></script> </html>
이것은 기본 웹 페이지의 예이지만 아직 인터랙티브하지 않습니다. 이 웹 페이지가 실행되면 버튼과 일부 텍스트가 표시되지만 버튼을 클릭해도 아무 일도 일어나지 않습니다. 아직 onclick 스크립트 기능을 구현하지 않았기 때문입니다.
이제 웹 페이지가 준비되었으므로 onclick 이벤트 생성을 시작할 수 있습니다. 먼저 버튼에 onclick() 이벤트 리스너를 추가해야 합니다. 이 이벤트는 사용자가 버튼을 클릭할 때 수신 대기합니다.
index.html ... <body> <button onclick=”changeParagraph()”>Click here.</button> <p>This text will change when you click the button.</p> </body> …
changeParagraph() 이벤트에 대한 코드를 저장할 "onclick.js" 파일을 만들어 보겠습니다. 이 이벤트는 단락의 텍스트("p" 요소)를 다른 것으로 변경합니다.
onclick.js
const changeParagraph = () => {
const paragraph = document.querySelector(“p”);
paragraph.textContent = “This text has changed because you clicked the button.”
}
changeParagraph라는 JavaScript 함수를 정의했습니다. JavaScript querySelector 메서드를 사용하여 페이지에서 단락을 선택합니다. 페이지를 처음 로드하면 "이 텍스트는 버튼을 클릭하면 변경됩니다."라는 텍스트와 버튼이 표시됩니다.
버튼을 클릭하면 웹 페이지가 변경되고 새 텍스트가 표시됩니다.
요약
전반적으로 onclick()은 웹 페이지의 요소를 클릭할 때 특정 코드를 실행할 수 있는 JavaScript 이벤트 유형입니다.
그게 다야! 위의 코드를 사용하여 버튼을 눌렀을 때 코드가 실행되는 웹페이지를 성공적으로 만들었습니다. 위의 코드는 텍스트만 변경하지만 원하는 만큼 복잡하거나 간단하게 만들 수 있습니다.
사용자가 버튼을 클릭할 때 경고를 받게 하려면 JavaScript에서 alert() 함수를 사용할 수 있습니다. 코드에 "if" 문을 추가하려는 경우에도 추가할 수 있습니다.
더 많은 JavaScript 학습 리소스는 JavaScript 학습 방법 가이드를 확인하세요.