이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

 

onclick 속성은 현재 요소의 click 이벤트 핸들러 코드를 반환한다.

Note: When using the click event to trigger an action, also consider adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen.

Syntax

element.onclick = functionRef;

 

여기서, functionRef 는 함수이다 - 대개 다른 곳에서 선언된 함수의 이름 또는 함수 표현식이다.  자세한 사항은 "JavaScript Guide:Functions" 을 보자. 

지정된 이벤트 핸들러 함수에 전달된 단일 인수는 MouseEvent  객체이다. 핸들러 안에,  this  는 이벤트가 유발된 요소이다.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>onclick event example</title>
    <script>
      function initElement() {
        var p = document.getElementById("foo");
        // NOTE: showAlert(); or showAlert(param); will NOT work here.
        // Must be a reference to a function name, not a function call.
        p.onclick = showAlert;
      };

      function showAlert(event) {
        alert("onclick Event detected!");
      }
    </script>
    <style>
      #foo {
        border: solid blue 2px;
      }
    </style>
  </head>
  <body onload="initElement();">
    <span id="foo">My Event Element</span>
    <p>click on the above element.</p>
  </body>
</html>

Or you can use an anonymous function, like this:

p.onclick = function(event) { alert("moot!"); };

Notes

The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.

Only one click handler can be assigned to an object at a time with this property. You may be inclined to use the EventTarget.addEventListener() method instead, since it is more flexible and part of the DOM Events specification.

Specification

Specification Status Comment
HTML Living Standard
The definition of 'onclick' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

문서 태그 및 공헌자

이 페이지의 공헌자: Parcovia
최종 변경자: Parcovia,