클릭 이벤트
예시
버튼을 클릭하면 JavaScript를 실행합니다.
<button onclick="myFunction()">Click me</button>
정의 및 사용
onclick이벤트는 사용자가 요소를 클릭할 때 발생합니다 .
HTML:
<element onclick="myScript">
자바스크립트:
object.onclick = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("click", myScript);
기술적 세부 사항
| 거품: | 네 |
|---|---|
| 취소 가능: | 네 |
| 이벤트 유형: | 마우스 이벤트 |
| 지원되는 HTML 태그: |
모두 제외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title> |
더 많은 예
<버튼>을 클릭하면 날짜가 표시됩니다.
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
<h3> 요소를 클릭하여 텍스트 색상을 변경합니다.
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
요소의 색상을 변경하는 방법에 대한 또 다른 예:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
한 입력 필드에서 다른 입력 필드로 텍스트를 복사하려면 클릭하십시오.
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
창 개체에 "onclick" 이벤트를 할당하는 방법:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
onclick을 사용하여 드롭다운을 만듭니다.
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
관련 페이지
JavaScript 튜토리얼: JavaScript 이벤트
HTML DOM 참조: ondblclick 이벤트
HTML DOM 참조: onmousedown 이벤트
HTML DOM 참조: onmouseup 이벤트
브라우저 지원
onclick DOM 레벨 2(2001) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |