원본: HTML Button onclick – JavaScript Click Event Tutorial
웹 사이트를 방문할 때 마다 링크나 버튼 같은 것을 클릭합니다.
링크는 페이지의 특정 부분이나 다른 페이지로 이동합니다. 반면 버튼은 자바스크립트 이벤트에 의해 조작되어 특정 기능을 실행하게 할 수 있습니다.
이 포스트에서는 두 가지 방법을 사용하여 클릭 이벤트를 실행하는 방법을 알아보겠습니다.
먼저 HTML 코드에서 바로 작성할 수 있는 onclick 속성을 알아보고 보다 현대적으로 자바스크립트 코드를 분리하여 “click” eventListener가 어떻게 작동하는지 살펴보겠습니다.
Table of Contents
onclick 이벤트 사용 방법
onclick 이벤트는 버튼을 클릭했을 때 특정 기능을 수행하게 해줍니다. 이는 사용자가 양식을 제출하거나 웹 페이지의 특정 콘텐츠를 변경할 때 등이 될 수 있습니다.
이를 사용하려면 다음과 같이 button의 여는 태그 안에 실행하고 싶은 자바스크립트 함수를 넣습니다:
<button onclick="functionToExecute()">Click</button>여는 태그에 작성된 코드로 onclick은 순수한 자바스크립트 속성임을 알 수 있습니다. 자바스크립트에서의 함수 호출 방법은 함수이름을 쓰고 뒤에 괄호를 붙이는 것 입니다.
onclick 이벤트 예제
이 이벤트를 실제 실습에 적용할 수 있도록 약간의 스타일링이 포함된 기본 HTML을 준비했습니다.
<link rel="stylesheet" href="styles.css">
<div>
<p class="name">shinyks</p>
<button>Change to Blue</button>
</div>다음은 뒤의 예제 코드에서도 사용할 스타일 지정용 CSS 입니다.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
여기서 작성해 볼 코드는 버튼을 클릭하면 텍스트의 색상을 파란색으로 변경하는 것 입니다. 다시말해 버튼의 속성에 이 기능을 실행해 줄 onclick을 추가해야 합니다.
따라서 HTML을 약간 변경해줘야 합니다.
<link rel="stylesheet" href="styles.css">
<div>
<p class="name">shinyks</p>
<button onclick="changeColor()">Change to Blue</button>
</div>실행하고자하는 함수는 changeColor() 입니다. 이 함수는 자바스크립트 코드이기 때문에 <script> 태그를 추가하거나 자바스크립트 파일을 추가해야 합니다.
이제 changeColor() 함수를 작성해 보겠습니다.
먼저 조작하려는 요소, 즉 shinyks 텍스트를 가지고 있는 <p> 태그를 선택해야 합니다.
이를 수행하려면 자바스크립트 DOM의 getElementById(), getElementsByClassName(), querySelector() 메소드를 사용할 수 있습니다.
이 포스트에서는 더 현대적인 querySelector() 메소드를 사용하겠습니다. 또한 let 이나 var이 아닌 const를 사용하겠습니다. 이는 변수를 읽기 전용으로 선언하여 더 안전하기 때문입니다.
자바스크립트 코드를 추가하여 다음과 같이 HTML 파일을 수정하겠습니다.
<link rel="stylesheet" href="styles.css">
<div>
<p class="name">shinyks</p>
<button onclick="changeColor()">Change to Blue</button>
</div>
<script>
const name = document.querySelector(".name");
function changeColor() {
name.style.color = "blue";
}
</script>이제 코드를 실행하고 버튼을 클릭하면 무슨 일이 일어날까요?
shinyks 텍스트가 파란색으로 바뀌었습니다. 이는 changeColor() 함수에 class가 name인 <p> 태그의 style.color를 blue로 할당했기 때문입니다.
click addEventListener 사용 방법
자바스크립트에는 동일한 작업을 수행하는 여러 가지 방법이 있습니다.
addEventListener() 메소드를 사용하면 HTML 코드에서 자바스크립트를 분리할 수 있습니다.
onclick 속성으로도 동일한 작업을 수행할 수 있지만 여기서는 다른 접근 방법을 취하겠습니다.
기본 addEventListener 구문
element.addEventListener("type-of-event", functionToExecute);이제 click 이벤트 리스너를 사용하여 shinyks 텍스트를 파란색으로 변경해 보겠습니다. 다음은 새로은 HTML 코드 입니다.
<link rel="stylesheet" href="styles.css">
<div>
<p class="name">shinyks</p>
<button>Change Color</button>
</div>
<script>
</script>이번에는 <script> 에서 버튼도 선택해야 합니다. 이유는 버튼에 onclick 속성을 안쓰고 이벤트 리스너를 사용할 것이기 때문입니다.
따라서 <script> 안에 들어갈 코드는 다음과 같습니다.
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
코드를 실행하여 버튼을 클릭하면 위의 이미지와 같이 shinyks 텍스트가 파란색으로 변하는 것을 확인할 수 있습니다.