여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - 기초 - 이벤트
Javascript – 기초 – 이벤트
6개월전 작성
7개월전 수정

이벤트

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 함수가 실행되는 이벤트 핸들러를 삭제한다.
참고
관련 포스트
Javascript - 기초 - 이벤트 - 현재글
Mingg`s Diary
밍구
공부 목적 블로그