06. 이벤트
이벤트(Event)
1
2
3
4
5
6
7
8
9
10
11
12
이벤트 :
- 브라우저에서 동작, 행위
click, keydown, keypress, keyup, mouseover, mouseout, mouseleve,
mouseenter, change, submit....
이벤트 리스너(Event Listener)
- 이벤트가 발생하는 것을 대기하고 있다가 이벤트 발생이 감지되면 연결된 기능(함수)를 수행
onclick, onkeyup, onchange, onsubmit,....(on이벤트)
이벤트 핸들러(Event Handler)
- 이벤트 리스너에 연결된 기능(함수)
이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수
1) 인라인 이벤트 모델
1
2
3
요소 내부에 이벤트 리스너, 핸들러 작성하는 방법
on이벤트명 = "함수명()" 형태로 작성
2) 고전 이벤트 모델
1
요소가 가지고 있는 이벤트 속성(이벤트 리스너)에 이벤트 핸들러를 직접 연결하는 방법
3) 표준 이벤트 모델**
1
2
3
4
5
6
W3C에서 공식적으로 지정한 이벤트 모델
요소.addEventListener("이벤트명", 함수);
고전 이벤트 모델의 단점 보완 가능
(한 요소에 여러 이벤트 핸들러를 설정할 수 있다)
4) 입력한 값으로 배경색이 변하는 박스
1
2
<div id="div1"></div>
<input type="text" id="input1">
1
2
3
4
5
document.getElementById("input1").addEventListener("keyup", function(){
const div1 = document.getElementById("div1");
div1.style.backgroundColor = this.value;
}
