참고: HTML 버튼 클릭
참고: 자바스크립트 버튼 눌림 효과
html의 button을 클릭하면 onclick 이벤트가 발생합니다. 코드 작성자는 이를 활용해 버튼이 눌린 경우 javascript 코드를 실행하도록 할 수 있습니다. 이러한 onclick 이벤트를 받는 방법은 크게 세 가지로 html에서 직접 받기, javascript로 받기, addEventListener 활용하기 입니다.
1. HTML의 onclick 속성 사용
이 예제에서는 html onclick 속성을 사용해 javascript 함수를 할당하겠습니다. 웹사이트 사용자가 버튼을 클릭하면 그에 해당하는 함수가 실행될 것이고 화면에 alert 다이얼로그를 보일 것 입니다.
<!DOCTYPE html>
<html>
<body>
<h1>버튼을 클릭해주세요</h1>
<button onclick="doAction()">click me</button>
<script>
function doAction() {
alert("Hello World");
}
</script>
</body>
</html>html button의 onclick 속성에 doAction() 함수를 할당하여 버튼이 눌린 경우 해당하는 스크립트를 실행하도록 했습니다.
결과:
주어진 버튼을 클릭하면 결과:
2. JavaScript 사용
이번에는 javascript의 onclick 이벤트를 사용해 보겠습니다. 웹사이트 사용자가 버튼을 누르면 그 버튼에 해당하는 javascript 코드가 실행되고 위의 예제와 동일하게 alert 다이얼로그가 뜨도록 하겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>아래 버튼을 클릭해주세요</h1>
<button id="my-button">안녕</button>
<script>
document.getElementById("my-button").onclick = function () {
alert("Hello World");
};
</script>
</body>
</html>위 코드에서는 my-button을 id로 가지는 html 항목을 javascript getElementById() 메소드로 가져와서 onclick에 지정한 스크립트를 할당했습니다.
결과:
안녕 버튼을 누르면:
3. addEventListener() 메소드 사용
이번 예제에서는 javascript의 addEventListener() 메소드를 사용하여 버튼에 click 이벤트를 추가할 것 입니다. 사용자가 버튼을 클릭하면 해당하는 javascript 코드가 실행되도록 해보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>배경색을 바꿔주세요</h1>
<button id="my-button">버튼</button>
<script>
const myButton = document.getElementById("my-button");
myButton.addEventListener('click', () => {
document.body.style.backgroundColor = 'red';
});
</script>
</body>
</html>위의 코드에서는 addEventListener() 메소드를 사용해 click 이벤트를 추가하고 해당하는 javascript 함수를 할당했습니다. 이번에는 alert 다이얼로그를 보이지 않고 배경을 빨간색으로 바꿨습니다.
결과:
버튼을 누르면:
정리
html:
<element onclick = "doAction()">javascript:
object.onclick = function() { myScript };addEventListener() 메소드를 사용한 javascript
object.addEventListener("click", myScript);
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 반올림, 올림, 내림 (round, ceil, floor) (0) | 2022.06.27 |
|---|---|
| [javascript] 자바스크립트 팝업 사용 방법 (alert, confirm, prompt) (1) | 2022.06.14 |
| [javascript] 자바스크립트 공백 제거(trim, strip whitespace) (0) | 2022.06.14 |
| [javascript] 자바스크립트 fade-in 페이지 전환 효과 만들기 (0) | 2022.06.13 |
| [javascript] 자바스크립트 forEach 사용 방법 (루프돌기) (0) | 2022.06.13 |
댓글