10-1 이벤트

이벤트 : 웹을 살아 숨 쉬게 만드는 요소

버튼 클릭 횟수를 보여주는 이벤트 만들기

버튼생성

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
</head>
<body>
    <button>click me</button>
    <script src="./event.js"></script>
</body>
</html>

click_event로 설정하였으며, 사용자가 버튼을 몇 번 클릭하였는지 기억하기 위해
n이라는 변수를 선언하고, 초깃값을 0으로 설정

var n = 0;

function click_event() {
  n++;
  alert(n + "번 클릭하였습니다.");
}

onclick 에 함수를 연결

<body>
    <button onclick=click_event()>click me</button>
    <script src="./event.js"></script>
</body>

자바스크립트를 통해 버튼에 클릭 이벤트를 추가

function onClick() {
  alert("첫 번째 이벤트");
}
function onClick2() {
  alert("두 번째 이벤트");
}
document.getElementById('clickMe').addEventListener('click', onClick); //첫 번째 이벤트 연결
document.getElementById('clickMe').addEventListener('click', onClick2); // 두 번째 이벤트 연결

콜백(callback)

다른 함수가 실행을 끝낸 뒤 실행되는 함수를 의미

setTimeout( 함수, 시간)

setTimeout 함수를 사용하시면 매개변수로 넣은 시간이 지날 때까지 해당 함수는 실행이 되지 않음

좋은 웹페이지 즐겨찾기