HTML에는 웹 페이지의 유효성을 검사하고 탐색하기 위해 사용자 요청 데이터를 서버(백엔드)에 제출하는 버튼이 있습니다. 주로 이벤트 속성에 대해 onclick 버튼을 사용하고 모든 브라우저에서 지원되는 경우 스크립트에서 이 이벤트 기능을 사용할 때마다 브라우저 호환성 기능도 마찬가지입니다. 사용자가 <버튼>을 클릭하면 이벤트가 나타납니다. 태그를 사용하려면
주로 사용자가 버튼을 클릭해야 할 때마다 함수를 트리거하고 호출하는 데 사용됩니다. 사용자가
구문:
<button name="" value="" onclick<strong> ="</strong>function()"/>
위 구문은 html 속성에서 onclick 이벤트의 기본 사용법입니다. 또한 사용자 요구 사항에 따라 필요할 때마다 이벤트를 맞춤화했습니다.
다음은 html의 onclick 버튼 예입니다.
코드:
<html>
<body>
<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>출력:
위의 예에서는 javascript 함수를 만들었습니다. 또한 사용자가 "클릭" 버튼을 클릭하면 브라우저 자체에 "환영합니다"라는 값이 표시됩니다.
코드:
<html>
<body>
<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>출력:
위 예시도 이전 예시 1에서 논의한 것과 동일하지만 여기서는 <버튼>을 사용하지 않습니다. 태그 대신
태그(단락) 태그입니다. 그러면 코드 줄이 줄어듭니다.
코드:
<html>
<body>
Username: <input type="text" id="user" value="sivaraman" ><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>
</body>
</html>출력:
위의 예에서는 사용자 이름에서 비밀번호로 자동 복사되는 '클릭' 버튼을 선택한 후 사용자 이름에서 비밀번호로 값을 복사하는 JavaScript 함수를 호출했습니다. onclick 이벤트의 기본 동작 중 하나입니다.
예를 들어 클릭 후 주어진 값의 색상을 변경하려는 경우
<html>
<body>
<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>
</body>
</html>출력:
html 태그에서 onclick 이벤트를 사용하는 데 도움이 되는 몇 가지 제안 사항은 다음과 같습니다.
1. onclick=”javascript:function()”을 사용하지 말고 href 하이퍼링크:
과 같은 속성 내부에 javascript: like 접두어만 사용하세요.2. onclick=" function()" 및 onclick=" function();"과 같은 세미콜론으로 끝나지 않습니다. 둘 다 잘 작동하지만 함수 끝에 세미콜론을 사용하는 것은 좋은 습관이 아닙니다.
3. onclick, onCLICK 및 ONCLICK과 같은 이벤트 속성은 모두 작동하지만 일반적으로 document.getElementById().onclick=”과 같이 작성할 때 소문자와 같은 속성을 작성하고 javascript 자체도 대소문자를 구분합니다. 그러면 모두 다음과 같아야 합니다. 소문자입니다.
onclick은 자바스크립트 함수의 이벤트 트리거이기도 합니다. 사용자 확인 및 웹 페이지 탐색에 도움이 될 수 있습니다. jquery에서는 onclick 이벤트 행위를 사용자 정의 요구 사항의 주요 부분으로 사용합니다. React js와 마찬가지로 angle은 onclick 함수에서 사용하는 다른 프레임워크입니다. 또한 Google Chrome, Mozilla Firefox, Safari 등과 같은 최신 브라우저 대부분을 지원합니다. 자바스크립트에서는 onclick 이벤트 기능을 처리할 수 있을 뿐만 아니라 "선택 시, 제출 시, 제출 시"와 같은 다른 속성에도 사용할 수 있습니다. ontoggle,onkeyup “등.. 사용자 요구 사항에 따라 html에서 이벤트 속성을 사용할 수 있습니다.
위 내용은 HTML 온클릭 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
