이벤트
Javascript의 이벤트란, 사건(action) 혹은 발생(occurrence)이다.
시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 만들고 이벤트가 발생되었을 때 코드를 실행한다.
기초적인 이벤트 유형에는 요소위에 마우스를 가져가거나(hover), 버튼을 클릭(click)하거나, 키를 누르거나(keydown) 키에서 손을 떼는것(keyup)등이 사용된다.
이벤트 유형은 MDN Web Docs - Event reference를 참고하자.
인라인 이벤트 핸들러
사용을 권장하지 않는다.
한 줄만 필요하다면 괜찮을 수 있으나 여러줄에서 필요하다면 여러번 입력을 해야하므로 번거롭다.
그 뿐 아니라 html과 javascript를 계속 혼합하여 코딩하면 분석하기 어려워진다.
이벤트 핸들러 프로퍼티
HTML
<button>Change color</button>
Javascript
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
기본 예시
사용된 코드 설명
return Math.floor(Math.random() * (number+1));
:
무작위로 숫자를 만들고 그 값을 반환한다.
btn.onclick = function() { … }
:
btn을 클릭했을 때 함수가 실행되게끔 한다.
const rndCol = ‘rgb(‘ + random(255) + ‘,’ + random(255) + ‘,’ + random(255) + ‘)’;
:
rndCol 변수를 만들고 rgb 값을 무작위 숫자로 저장한다.
document.body.style.backgroundColor = rndCol;
:
rndCol의 값을 HTML 문서의 body에 background color 값으로 넣는다.
이벤트 핸들러
addEventListener(), removeEventListener()를 이용하여 이벤트 핸들러 추가, 삭제 할 수 있다.
addEventListener()
addEventListener()에는 두 개의 매개변수를 입력한다.
Javascript
변수 이름.addEventListener(이벤트 유형, 적용할 코드 or 함수 이름);
이런식으로 입력을 한다.
이벤트 유형은 MDN Web Docs - Event reference를 참고하자.
HTML
<button>Change color</button>
Javascript
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.addEventListener('click', () => {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
document.body.style.backgroundColor = rndCol;
});
기본 예시
사용된 코드 설명
btn.addEventListener(‘click’, () => { … }
:
btn을 클릭했을 때 { … }의 코드를 실행하게끔 이벤트 핸들러를 추가한다.
removeEventListener()
removeEventListener()에도 동일하게 두 개의 매개변수를 입력한다.
Javascript
변수 이름.addEventListener(이벤트 유형, 적용할 코드 or 함수 이름);
이런식으로 입력을 한다.
이벤트 유형은 MDN Web Docs - Event reference를 참고하자.
Javascript
btn.removeEventListener('click', bgChange);
사용된 코드 설명
btn.removeEventListener(‘click’, bgChange);
:
btn 클릭했을 때 bgChange 함수가 실행되는 이벤트 핸들러를 삭제한다.
참고
MDN Web Docs - JavaScript First Steps
MDN Web Docs - JavaScript building blocks
MDN Web Docs - Introduction to events
MDN Web Docs - Event reference
관련 포스트
Javascript - 기초
Javascript - 기초 - 구성
Javascript - 기초 - 조건문
Javascript - 기초 - 반복문
Javascript - 기초 - 함수
Javascript - 기초 - 이벤트 - 현재글
Javascript - 기초 - 이벤트 예시
공부 목적 블로그