Onclick Event(온클릭 이벤트)

온클릭 이벤트

사용법도 매우 쉽고 의외로 많이 사용하는 온클릭 이벤트(HTML DOM)다. DOM Events 중에서 Click 버튼으로 팝업창을 열거나 모달 창으로 안내하는 방식 등 일반 쇼핑몰에서 아주 많이 사용되는 형식이다. 예시의 경우는 워낙 많아서 그중에 개인적으로 귀여운 버튼을 한번 만들어봤다.

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

1. HTML 에서 사용법

<element onclick="myScript">

2. JavaScript 에서 사용법

object.onclick = function(){myScript};

3. addEventListener() 를 사용했을 때

object.addEventListener("click", myScript);

참고로 드랍다운 버튼도 onclick으로 구현할 수 있다. 스타일을 지정해주고, HTML으로 구조를 만들어준 뒤, 간단한 자바스크립트 코드를 작성한다.

<div class="dropdown">
  <button id="myBtn" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
// 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");
}
</script>

Clickable Dropdown

Click on the button to open the dropdown menu.

Home About Contact

간혹 티스토리에서는 HTML 모드를 해제하면 스타일이 풀리는 경우가 생긴다. 따라서 별도의 수정은 하지 않도록 하고 이것으로 onclick으로 구현할 수 있는 다양한 기능들을 간단하게 정리해봤다.