Event Model 이벤트 모델
: 사용자가 특정 행위를 했을 때 보여주는 결과 동작
Tip) 이벤트 모델은 사용자의 행위를 예측하고 행위에 대한 처리를 미리 만들어 놓은 함수에 연결해 주는 작업
| 이벤트 이름 | 이벤트 속성 | 이벤트 핸들러 (리스너, 함수) | |
| ex | click | onclick | function( ){ } |
마우스 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| click | onclick() | 마우스가 요소를 클릭할 때 발생 |
| dbclick | ondbclick() | 마우스가 요소를 더블클릭 할 때 |
| mouseup | onmouseup() | 마우스를 요소 위에 놓을 때 |
| mousedown | onmousedown() | 마우스로 요소를 누를(?) 때 |
| mouseenter | onmouseenter() | 포인터가 요소 위로 이동할 때 |
| mouseleave | onmouseleave() | 포인터가 요소 밖으로 이동할 때 |
| mouseover | onmouseover() | 포인터를 요소 위로 이동하거나 자식 요소 중 하나로 이동할 때 |
| mouseout | onmouseout() | 포인터를 요소 밖으로 이동하거나 자식 요소 중 하나에서 벗어날 때 |
키보드 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| keydown | onkeydown() | 키보드를 누를 때 |
| keyup | onkeyup() | 키보드에서 손을 뗄 때 |
| keypress | onkeypress() | 키보드로 문자를 입력할 때 |
포커스 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| focus | onfocus() | 포커스를 얻었을 때 |
| blur | onblur() | 포커스를 잃었을 때 |
| focusin | onfocusin() | 포커스를 얻었을 때 (버블링 발생) |
| focusout | onfocusout() | 포커스를 잃었을 때 (버블링 발생) |
버블링Event Bubbling: 특정 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소들로 전달되어 가는 특성
폼 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| change | onchange() | 요소의 내용을 변경할 때 |
| input | oninput() | 데이터를 입력 받았을 때 |
| submit | onsubmit() | 입력 내용을 전송할 때 |
| reset | onreset() | 입력 내용을 초기화할 때 |
유저 인터페이스 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| load | onload() | 웹페이지의 로드가 완료되었을 때 (처음 페이지 요청) |
| unload | onunload() | 웹페이지가 언로드 되거나 브라우저 창이 닫히면 (새로운 페이지 요청) |
| error | onerror() | 스크립트에 오류가 있을 때 |
| resize | onresize() | 브라우저의 창 크기를 변경할 때 |
| scroll | onscroll() | 페이지를 위 아래로 스크롤 할 때 |
| select | onselect() | 요소를 선택할 때 |
드래그 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| drag | ondrag() | 요소가 드래그 되고 있는 동안 소스 객체에서 발생 |
| dragend | ondragend() | 요소의 드래그가 끝나면 소스 객체에서 발생 |
| drangenter | ondrangenter() | 요소가 타겟 객체의 태그 영역에 들어갈 때 타겟 객체에서 발생 |
| dragleave() | ondragleave() | 요소가 타겟 객체의 태그 영역에 나갈 때 타겟 객체에서 발생 |
| dragover | ondragover() | 요소를 타겟 객체 영역에서 드래그 하는 동안 타겟 객체에서 발생 |
| dragstart | ondragstart() | 요소를 드래그하기 시작할 때 소스 객체에서 발생 |
| drop | ondrop() | 요소를 타겟 객체 영역에서 놓으면 타겟 객체에서 발생 |
| draggable | 요소를 드래그 할 수 있는지 여부 T / F |
터치 이벤트
| 이벤트 | 이벤트 속성 | 이벤트 발생 시기 |
| touchcancel | ontouchcancel() | 스크린에서 터치가 중단되면 발생 |
| touchend | ontouchend() | 스크린에서 터치가 끝나면 발생 |
| touchmove | ontouchmove() | 스크린에서 드래그하면 발생 |
| touchstart | ontouchstart() | 스크린에 터치하면 발생 |
DOM Level 0
: 하나의 이벤트에 하나의 리스너만 연결할 수 있다
인라인 이벤트 모델
: HTML 태그에 JavaScript 코드를 추가해서 이벤트를 연결
가장 기본적인 이벤트 연결 방식, 하나의 이벤트에 하나의 핸들러만 연결
<script>
function btnClick(v) {
alert(v);
}
</script>
<body>
<input type="button" value="클릭1" onclick="alert('클릭1')">
<input type="button" value="클릭2" onclick="var str='클릭2'; alert(str);">
<input type="button" value="클릭3" onclick="btnClick(value)">
</body>
고전 이벤트 모델
: 가장 기본적인 이벤트 연결 방식, 하나의 이벤트에 하나의 핸들러만 연결
window.onload = function() {
var btn = document.getElementById('btn1');
btn.onclick = function() {
alert('클릭1'); //클릭1을 출력한 후,
btn.onclick = null; //클릭 시 이벤트 제거!
}
};
<input type="button" id="btn1" value="클릭1"> <!-- 클릭1으로 보임 -->
<input type="button" id="btn2" value="클릭2" onclick="alert('클릭')">
DOM Level 2
: 하나의 이벤트에 여러 개의 리스너를 연결할 수 있다
표준 이벤트 모델
: 객체나 요소의 메서드로 이벤트 핸들러를 전달하는 방식, 한 번에 여러가지 이벤트 핸들러를 연결할 수 있다.
W3C에서 공식 지정한 모델
| 메서드 | 설명 |
| addEventListener(eventName, handler, [useCapture]) | 특정 이벤트를 등록하고 해당 함수 실행 |
| removeEventListener(eventName, handler) | 등록한 이벤트 리스너 제거 |