onclick 이벤트

DOM 이벤트 MouseEvent

정의와 사용법

onclick 이벤트는 사용자가 요소를 클릭할 때 발생합니다。

实例

버튼을 클릭할 때 JavaScript를 실행하십시오：

<button onclick="myFunction()">Click me</button>

직접 테스트해 보세요

페이지 하단에 더 많은 TIY 예제가 있습니다。

문법

HTML에서：

<element onclick="myScript">

직접 테스트해 보세요

JavaScript에서：

object.onclick = function(){myScript};

직접 테스트해 보세요

JavaScript에서 addEventListener() 메서드를 사용하여：

object.addEventListener("click", myScript);

직접 테스트해 보세요

주의사항：Internet Explorer 8 이상 버전은 addEventListener() 메서드를 지원하지 않습니다. addEventListener() 메서드。

기술 세부 사항

버블링： 지원
취소 가능： 지원
이벤트 유형： MouseEvent
지원되는 HTML 태그： 모든 HTML 요소 중에서는：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>를 제외하고
DOM 버전： Level 2 Events

브라우저 지원

이벤트 크롬 IE 파이어폭스 사파리 오페라
onclick 지원 지원 지원 지원 지원

更多实例

实例

클릭 <button> 요소를 통해 현재 날짜와 시간을 표시하십시오：

<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

직접 테스트해 보세요

实例

单击 <p> 元素将其文本颜色更改为红色：

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

직접 테스트해 보세요

实例

关于如何通过单击来更改 <p> 元素颜色的另一个例子：

<p 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 对象： 
window.onclick = myFunction;
// 如果用户在窗口中单击，则将 <body> 的背景颜色设置为黄色
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

직접 테스트해 보세요

实例

使用 onclick 创建下拉按钮：

// 获取按钮，当用户点击时，执行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除 show 类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

직접 테스트해 보세요

관련 페이지

JavaScript 교육:JavaScript 이벤트

HTML DOM 참조 설명서:ondblclick 이벤트

HTML DOM 참조 설명서:onmousedown 이벤트

HTML DOM 참조 설명서:onmouseup 이벤트

DOM 이벤트 MouseEvent