최신 웹 개발 튜토리얼
 

온 클릭 이벤트

이벤트 객체 참조 이벤트 객체

예

버튼을 클릭하면 자바 스크립트를 실행합니다 :

<button onclick="myFunction()">Click me</button>
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

사용자가 요소를 클릭 할 때 온 클릭 이벤트가 발생한다.

브라우저 지원

행사
onclick 예 예 예 예 예

통사론

HTML에서 :

< »그것을 자신을 시도

자바 스크립트에서 :

object .onclick=function(){ »그것을 자신을 시도

자바 스크립트는 사용 addEventListener() 메서드를 :

object .addEventListener("click", myScript );
»그것을 자신을 시도

참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.

기술적 세부 사항

거품 : 예
취소 가능 : 예
이벤트 유형: 된 MouseEvent
지원되는 HTML 태그 : <기본>, <BDO>로 <br>, <머리>, <HTML>, <iframe을>, <메타>, <PARAM>, <스크립트>, <스타일>, 그리고 : 제외한 모든 HTML 요소, <title>
DOM 버전 : 레벨 2 이벤트
예

더 예

예

A의 클릭 <button> 현재 요일, 날짜와 시간을 표시하는 요소 :

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
»그것을 자신을 시도

예

A의 클릭 <p> 빨간색의 텍스트 색상을 변경하는 요소 :

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
»그것을 자신을 시도

예

a의 색상 변경하는 방법에 대한 또 다른 예를 들어 <p> 클릭하여 요소를 :

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>
»그것을 자신을 시도

예

다른 입력 필드에 입력 필드에서 텍스트를 복사 할 버튼을 클릭합니다 :

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
»그것을 자신을 시도

예

할당 "onclick" 윈도우 객체에 이벤트를 :

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
»그것을 자신을 시도

예

드롭 다운 단추를 만들 onclick을 사용 :

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
»그것을 자신을 시도

관련 페이지

HTML DOM 참조 : ondblclick 이벤트

HTML DOM 참조 : 하면 onMouseDown 이벤트

HTML DOM 참조 : onMouseUp에 이벤트

<이벤트 객체