HTML 온클릭 버튼
- WBOY원래의
- 2024-09-04 16:49:36411검색
HTML에는 웹 페이지의 유효성을 검사하고 탐색하기 위해 사용자 요청 데이터를 서버(백엔드)에 제출하는 버튼이 있습니다. 주로 이벤트 속성에 대해 onclick 버튼을 사용하고 모든 브라우저에서 지원되는 경우 스크립트에서 이 이벤트 기능을 사용할 때마다 브라우저 호환성 기능도 마찬가지입니다. 사용자가 <버튼>을 클릭하면 이벤트가 나타납니다. 태그를 사용하려면
onclick 버튼 작동
주로 사용자가 버튼을 클릭해야 할 때마다 함수를 트리거하고 호출하는 데 사용됩니다. 사용자가
구문:
<button name="" value="" onclick<strong> ="</strong>function()"/>
위 구문은 html 속성에서 onclick 이벤트의 기본 사용법입니다. 또한 사용자 요구 사항에 따라 필요할 때마다 이벤트를 맞춤화했습니다.
HTML onclick 버튼의 예
다음은 html의 onclick 버튼 예입니다.
예시 #1
코드:
<html>
<body>
<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
출력:
위의 예에서는 javascript 함수를 만들었습니다. 또한 사용자가 "클릭" 버튼을 클릭하면 브라우저 자체에 "환영합니다"라는 값이 표시됩니다.
예시 #2
코드:
<html>
<body>
<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
출력:
위 예시도 이전 예시 1에서 논의한 것과 동일하지만 여기서는 <버튼>을 사용하지 않습니다. 태그 대신
태그(단락) 태그입니다. 그러면 코드 줄이 줄어듭니다.
예시 #3
코드:
<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 이벤트의 기본 동작 중 하나입니다.
다양한 이벤트 속 OnClick 이벤트
- 전역 이벤트 핸들러와 같은 일부 다른 이벤트에서 사용되는 onclick 속성 속성은 HTML 요소에서 클릭 이벤트를 처리하는 데 사용되는 이벤트 핸들러 아래의 이벤트 핸들러 메커니즘 중 하나이기도 합니다. 사용자 요청 후 클릭 이벤트가 발생할 때마다 마우스 다운 및 마우스 업 이벤트가 순서대로 발생한 후에 실행됩니다.
- 클릭 이벤트에도 몇 가지 트리거 작업이 있습니다. "key-down" 이벤트에 동일한 동작을 추가하는 것을 고려하면 마우스 포인터나 터치 스크린을 사용하지 않는 사용자도 동일한 동작을 사용할 수 있습니다. onclick 이벤트를 위한 자바스크립트 내장 기능이 있습니다.
- 함수가 MouseEvent 개체를 유일한 인수로 받는 경우 이 함수는 트리거될 이벤트의 요소이기도 합니다. 한 번에 하나의 개체에 대해 하나의 클릭 이벤트 핸들러만 할당됩니다. EventTarget.addEventListener() 메소드를 사용하면 더 유연해집니다.
예를 들어 클릭 후 주어진 값의 색상을 변경하려는 경우
<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>
출력:
- 위 예에서는 사용자 화면의 텍스트 색상을 변경하기 위해 클릭 이벤트를 호출했습니다. 많은 이벤트 트리거 기능과 마찬가지로 런타임 안내서 및 사용자 요구 사항에 유용할 수 있습니다.
- Onclick 이벤트도 그림 개체의 속성입니다. 또한 사용자가 버튼이나 그림 개체를 클릭할 때 평가되는 표현식이 포함되어 있습니다. onclick 이벤트는 또한 사용자가 이미지의 어느 부분을 클릭하는지에 따라 몇 가지 다른 작업을 수행합니다. 일반적으로 핸들러는
사용자가 마우스 커서를 사용하여 클릭하면 onclick 내부의 코드가 실행되고 html 속성 이름은 대소문자를 구분하지 않으므로 onclick은 onClick처럼 작동하지만 일반적으로 속성은 소문자로 사용됩니다. - 이동 버튼을 누를 때와 마찬가지로 양식 태그를 사용하여 웹 페이지에 액세스하면 컨트롤러는 백엔드 로직에서 사용자 요구 사항을 확인하고 결과 보기를 표시할 수 있습니다. 또한 웹페이지를 다시 로드합니다. onclick 이벤트가 자바스크립트 유효성 검사에서 작동하지 않는 경우가 있습니다. 즉, onclick 이벤트에서 함수를 호출할 때마다 html 페이지를 스크립트합니다. 사용자는 확인해야 하며 onclick() 함수가 정의된 경우 함수 이름을 바꿔야 합니다. 사용자 입력이나 좋아요 버튼은 자바스크립트 기능보다 우선순위가 높습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!