자바스크립트를 사용해 버튼 클릭 이벤트를 만들고자 하는 경우 html의 onclick 속성을 사용합니다. html의 onclick 속성은 onclick="" 형태로 사용하는데 큰따옴표("")안에 자바스크립트 코드가 들어가야합니다. 큰따옴표 안의 자바스크립트 코드에 따라 버튼 클릭 시 발생하는 동작이 달라집니다.
예를 들어, 화면의 버튼을 클릭했을 때 배경색과 글자색을 바꾸는 이벤트를 구현해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>배경색과 글자색 변경</h3>
<input type="button" value="Black" onclick="
alert('어두운 화면으로 변합니다.');
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';">
<input type="button" value="White" onclick="
alert('밝은 화면으로 변합니다.');
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';">
</body>
</html>
위의 코드를 실행시킨 화면을 보시면 화면의 배경색과 글자색이 바뀌는 것을 확인하실 수 있습니다.
위의 코드를 실행시킨 화면을 보시면 화면의 배경색과 글자색이 바뀌는 것을 확인하실 수 있습니다. 위의 코드에서 색을 변경하는데 사용한 자바스크립트 코드는 다음과 같습니다.
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
.style.backgroundColor와 .style.color은 각각 배경색과 글자색 스타일을 설정하는 부분입니다. 그리고 이렇게 설정한 스타일이 적용할 요소는 querySelector을 사용해 지정합니다. 위의 코드는 body 영역의 배경색과 글자색을 검정색과 하얀색으로 바꾸겠다는 의미입니다.
배경색과 글자색 외에도 다른 동작을 실행하고 싶다면 onclick의 큰따옴표("") 사이에 추가로 자바스크립트 코드를 작성하시면 됩니다. 예를 들어, 배경색이 바뀌는 것을 알려주는 메시지 창을 띄우고 싶다면 alert(); 코드를 새로 추가하면 됩니다.
