02. 이벤트

🔶 이벤트

• 웹 페이지와 사용자간의 상호작용으로 웹 브라우저에서 일어나는 사건 (action)
• 웹 페이지와 사용자와 상호작용으로 특정 엘리먼트에 가하는 어떤 행동을 말한다

이벤트란 프로그램과 시스템에서 발생하는 특정한 사건 또는 상황을 나타낸다
시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 발생시키고
이벤트가 밸상될 때 자동으로 정해진 코드를 실행하는 메커니즘을 제공한다

웹에서는 시스템에 해당하는 것이 웹 브라우저다
웹에서는 이벤트가 브라우저 내에서 발생되고 이벤트가 특정한 요소(태그,엘리먼트)에 부착되는 경향이 있다
각요소 (태그,엘리먼트) 에서 발생될 수 있는 다양한 이벤트 타입이 있다

이벤트가 발생하는 예시

발생 예시	이벤트 명
사용자가 마우스로 버튼을 클릭	onclick
사용자가 마우스를 움직인다	onmousemove
사용자가 브라우저 창의 크기를 조절하거나 , 닫을 때	onresize
웹 페이지가 로딩이 완료되었을 때	onload
폼 입력 값이 서버로 제출	onsubmit
사용자가 입력 필드에 키보드로 입력할 때	onkeypress , onkeyup , onkeydown
웹 페이지에서 오류가 발생할 때	onerror

 

이벤트 모델

1. 이벤트 Event
   • 웹 브라우저 윈도우 내에서 발생되는 것
     
     
     
2. 이벤트 소스 Event Source
   • 이벤트가 발생한 곳 ( 태그 , HTML 문서 , 웹브라우저 윈도우)
     
     
     
3. 이벤트 핸들러 Event Handler == 이벤트 리스너 Event Listener
   • 이벤트 발생을 감지하고 , 이벤트에 응답해서 실행되기 위해 정의된 코드블럭

 

 

이벤트의 종류

 

Mouse Event 🖱

• click 마우스 버튼을 클릭했을 때
•  dbclick 마우스 버튼을 더블 클릭했을 때
•  mousedown 마우스 버튼을 누르고 있을 때
• mouseup 누르고 있던 마우스 버튼을 뗄 때
•  mousemove 마우스를 움직일 때
•  mouseenter 마우스를 요소 안으로 움직일 때
•  mouseleave 마우스를 요소 밖으로 움직일 때
•  mouseover 마우스를 요소 위로 움직일 때
•  mouseout 마우스를 요소 밖으로 움직일 때

 

KeyBoard Event ⌨

• keydown 키보드의 키를 누르고 있을 때
• keyup 누르고 있던 키보드의 키를 뗼 때
• keypress 키를 누르고 뗐을 때

 

Form Event

• submit  폼 입력값이 제출될 때
• change 폼 입력값의 상태가 변경되었을 때 ( select , checkbox , radio의 상태가 변경되었을 때 )
• input    입력필드 , text area 의 값일 변경됬을 때
• focus   요소가 포커스를 획득 했을 때
• blur   요소가 포커스를 잃었을 때

 

form 태그 안에 button은 모두 제출 시킨다 ( = submit)

입력값을 제출하기 않기 위해 button 의 type을 submit이 아닌 button 으로

<form method="post" action="login.jsp">
    아이디
    <input type="text" name="id">
    비밀번호
    <input type="password" name="pwd">
    <input type="submit" value="로그인">
</form>

<form method="post" action="login.jsp">
    아이디
    <input type="text" name="id">
    <button type="button">중복체크</button>   <!--입력값을 제출하지 않기위해 type = button-->
    비밀번호
    <input type="password" name="pwd">
    <button type="submit" value="로그인">
</form>

<form method="post" action="login.jsp">
    아이디
    <input type="text" name="id">
    비밀번호
    <input type="password" name="pwd">
    <button>로그인</button>
</form>

 

UI Event

• load    웹페이지의 로드가 완료되었을 떄
• error   자바스크립트 실행중에 오류가 발생 했으나 요청한 자원이 존재하지 않을 때
• resize   브라우저 창의 크기를 조절했을 때
• scroll    사용자가 페이지를 위아래로 스크롤 했을 때
• select  사용자가 텍스트를 선택했을 때