JavaScript를 사용해 DOM에서 발생하는 이벤트를 감지하여 대응하는 여러 작업 수행 가능
이벤트는 일반적으로 함수와 연결이 되고,이벤트 발생 전에는 실행되지 않다가 이벤트가 발생할 경우 실행
Event Handler(Listener) 이벤트 발생시 실행해야 하는 함수
Event 종류
마우스 이벤트
이벤트
설명
onclick
마우스로 Element를 클릭 했을 때 발생
ondblclick
마우스로 Element를 더블 클릭 했을 때 발생
onmouseup
Element에 마우스 버튼을 올렸을 때 발생
onmousedown
Element에서 마우스 버튼을 눌렀을 때 발생
onmouseover
마우스를 움직여서 Element 밖에서 안으로 들어올 때 발생
onmouseout
마우스를 움직여서 Element 안에서 밖으로 나갈 때 발생
onmousemove
마우스를 움직일 때 발생
키보드 이벤트
이벤트
설명
onkeypress
키보드가 눌려 졌을 때 발생 (ASCII)
onkeydown
키보드를 누르는 순간 발생 (KeyCode)
onkeyup
누르고 있던 키를 뗄 때 발생
Frame(UI) 이벤트
이벤트
설명
onload
document image, frame 등이 모두 로딩 되었을 때 발생
onabort
이미지 등의 내용을 로딩하는 도중 취소 등으로 중단 되었을 때 발생
onerror
이미지 등의 내용을 로딩 중 오류가 발생 했을 때 발생
onresize
document, element의 크기가 변경 되었을 경우 발생
onscroll
document, element가 스크롤 되었을 때 발생
onselect
텍스트를 선택 했을 때 발생
Form 이벤트
이벤트
설명
onsubmit
form이 전송될 때 발생
onreset
입력 form이 reset될 때 발생
oninput
input 또는 textarea의 값이 변경 되었을 때 발생
onchange
select box, check box, radio button의 상태가
onfocus (focusin)
input과 같은 요소에 입력 포커스가 들어 올 때 발생
onblur (focusout)
input과 같은 요소 등에서 입력 포커스가 다른 곳으로 이동할 때 발생
onselect
input, text area에 입력 값 중 일부가 마우스 등으로 선택될 때 발생
EventHandler 등록
인라인 이벤트 핸들러
여러 개의 함수를 한번에 호출 가능
최근 관심 받고 있는 CBD(Component Based Development) 방식의 Angular/React/Vue.js와 같은 framework / library에서는 인라인 방식으로 이벤트를 처리 (CBD에서는 html, css, js를 view의 구성 요소만으로 보기 때문)
addEvnetListener(arg1, arg2[, arg3]) 를 이용하여 좀 더 세밀한 이벤트 제어가 가능
첫 번째 전달인자 = 이벤트 이름
두 번째 전달인자 = 이벤트 핸들러
세 번째 전달인자 = 캡쳐링 여부
첫 번째 전달인자의 이벤트 이름에는 ‘on’을 제거한 이벤트 이름을 사용
document.getElementById("div1").addEventListener("click", openAlert, false);
function openAlert() {
alert("안녕하세요.");
}
이벤트 핸들러 내부에서 함수를 호출하는 방식으로 인수 전달 해결 가능
const MIN_ID_LENGTH = 8;
const input = document.querySelector('input[type=text]');
const msg = document.querySelector('.message');
function checkVal(len) {
if (input.value.length < len) {
msg.innerHTML = "값은 " + len + "자 이상 입력해 주세요";
} else {
msg.innerHTML = "";
}
}
// 이벤트 발생 시까지 대기하지 않고 바로 실행.
// input.addEventListener('blur', checkVal(MIN_ID_LENGTH));
// 이벤트 발생 시까지 대기. but 인자값을 전달할 수 없음. Event객체가 전달
// input.addEventListener("blur", checkVal);
input.addEventListener('blur', function () {
// 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달
checkVal(MIN_ID_LENGTH);
});
input.addEventListener('blur', () => {
// 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달
console.log('111', this); // window 객체
checkVal(MIN_ID_LENGTH);
});
