“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”- Jef Raskin
맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도
반응형
| 클라이언트사이드 |
이벤트(event)
-> 이벤트가 발생하면 원하는 JavaScript 코드를 실행되도록 할 수 있음.
[자바 스크립트는 Jquery를 위해서 배웠다 ]
이벤트?
사용자가 웹브라우저에서 하는 모든 행위를 상세하게 구분하여 이벤트로 규정
(마우스클릭)
onmousedown
onmouseup
onclick
ondblclick
(마우스이동)
onmouseover
onmouseout등등
(키보드누르기)
onkeydown
onkeyup
onkeypress
폼(form) 입력(input)
onblur
onfocus
onfocusin
onfocusout
onsubmit
onchange
윈도우 조작
onresize
onscroll
onload
onunload
등등
이벤트 속성은 전부 소문자로 처리한다.
사용자의 행위가 아닌 시스템도 필요하면 이벤트를 발생시킬 수 있음
이벤트 모델
이벤트 관련 용어 정리
onload - 이벤트 속성 ( Event Property )
load - 이벤트 이름 ( Event Name )
- 이벤트 타임 ( Event Type )
이벤트 속성에 저장되는 함수
이벤트 리스너 ( Event Listener ) - 윈도우.언로드 사용해봄
이벤트 핸들러 ( Event Handler )
이벤트 모델 ( Event model ) - 자꾸 사용하고 용어를 익혀두자
-> 문서 객체의 이벤트 속성에 이벤트 핸들러를 연결하는 방법
인라인 이벤트 모델 ( inline event model )
- 태크 내부에 이벤트 처리 코드를 직접 코딩
<p onclick="alert('Clicked.');>text button</p>
->직관적이고 손쉬운 방법이긴 하나 긴 코드를 처리하기엔 부적합
html과 javascript 코드가 뒤섞여 유지 관리가 불편
고전 이벤트 모델
HTML과 독립적인 script 영역에서 태그의 이벤트 속성에 이벤트 핸들러 연결
<script>
let btn = socument.getElementById('button');
btn.onclick = function() { alert('clicked.');}
</script>
<body>
<p id = 'button'>text button</p>
</body>
= body와 script가 분리되어 유지 관리에 편리함
= 이벤트 핸들러를 하나만 연결할 수 있다.
-> 핸들러 하나만 사용 할 수 있는 것을 보완하기 위한 것이 표준 이벤트 모델이다
표준이벤트 모델
(가급적으로 표준 이벤트 모델을 사용하는 것이 좋음)
- 쳬계적이고 좀 더 익숙해지면 편함
이벤트 핸들러 연결 메소드를 이용하여 연결
속성 앞에 객체 이름이 와야하지만 윈도우 객체는 안와도 된다.