1. form
* 사용자가 입력한 정보를 서버로 전송하는 HTML 태그
- submit
- 폼의 정보를 서버로 번송하는 명령인 submit시에 일어난다.
- form 태그에 적용된다.
- 예제 >실행 화면 링크<
<form id="form" action="test.html">
<label for="name">name</label>
<input id="name" type="name" /> // name 타입의 텍스트 필드
<input type="submit" /> //submit
</form>
<script>
var t = document.getElementById('form');t.addEventListener('submit', function(event){ // submit 이벤트
if(document.getElementById('name').value.length === 0){ // name 텍스츠 필드에 값의 길이가 0이면 (값이 없으면)
alert('Name 필드의 값이 누락 되었습니다');
event.preventDefault(); // 이벤트 취소
}
});
</script>
- change
- form의 컨트롤 값이 변경되었을 때 발생하는 이벤트
- input(text, radio, checkbox) textarea, select 태그에 적용된다.
- 예제 >실행 화면 링크<
<p id="result"></p> // 입력한 텍스트가 출력될 결과 역역 <input id="name" type="name" /> // 입력 텍스트 <script> var t = document.getElementById('name'); t.addEventListener('change', function(event){ document.getElementById('result').innerHTML=event.target.value; }); </script>
- blur, focus
- blur : 엘리먼트의 포커스가 사라졌을 때
- focus : 엘리먼트에 포커스가 생겼을 때
- <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> 태그를 제외한 모든 태그에 적용된다.
- 예제 >실행 화면 링크<
<p> 결과 </p> <input id="name" type="name" /> <script> var t = document.getElementById('name'); t.addEventListener('blur', function(event){ // 텍스트 필드 밖을 클릭했을 때 alert('blur'); }); t.addEventListener('focus', function(event){ //텍스트 필드를 클릭했을 때 alert('focus'); }); </script>
2. 문서 로딩
* 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다.
* 이를 알려주는 이벤트가 load, DOMContentLoaded이다.
- JavaScript가 먼저 나올 때
<html>
<head>
<script>
var t = document.getElementById('output');
document.write(t);
</script>
</head>
<body>
<p id="output">Hello</p>
</body>
</html>
-> 결과
Hello
* <p id="output">Hello</p>가 로드되기 전에 스크립트가 실행되어 값은 null이 나왔다.
- 이를 해결하기 위한 첫번째 방법은 자바스크립트를 문서 끝에 위치시키는 것이다.
- 두번째 방법 : load 이벤트 이용
<html> <head> <script> window.addEventListener('load', function(){ //load 이벤트 이용 var t = document.getElementById('output'); document.write(t); } </script> </head> <body> <p id="output">Hello</p> </body> </html>
* load 이벤트 발생 시 메소드가 호출되면서 해당 HTML 엘리먼트를 찾는다.
* load 이벤트는 웹페이지 전체가 브라우저에서 해석이 끝나고 이미지와 스크립트 등의 리소스 까지 다운로드가 끝났을 때
load 객체가 자동으로 호출되도록 약속되어있다. 때문에 타겟을 찾을 수 있다.
* 하지만 이것은 어플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
- 세번째 방법 : DOMContentLoaded
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
}* 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지등의 리소스를 다운받을 필요가 없다.
3. 마우스
- 이벤트 타입
- click
클릭했을 때 발생하는 이벤트. - dblclick
더블클릭을 했을 때 발생하는 이벤트 - mousedown
마우스를 누를 때 발생 - mouseup
마우스버튼을 땔 때 발생 - mousemove
마우스를 움직일 때 - mouseover
마우스가 엘리먼트에 진입할 때 발생 - mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생 - contextmenu
컨텍스트 메뉴가 실행될 때 발생
- 키보드 조합
* 마우스 이벤트가 호출될 때 특수키( Alt, Ctrl, Shift )가 눌려진 상태를 감시해야 한다면 이벤트 객체의 프로퍼티를 사용한다.
- event.shiftKey
- event.altKey
- event.ctrlKey
- 마우스 포인터 위치
- clientX
- clientY
- 예제 >실행 화면 링크<
<html> <head> <style> body{ background-color: #2F4F4F; color:white; } #target{ width:200px; height:200px; background-color: #7FFFD4; margin:10px; } table{ border : 3px solid white; border-collapse: collapse; margin:10px; float: left; width:200px; } th{ background-color:black; padding:10px; border:2px solid gray; } td{ padding:10px; border:2px solid gray; } </style> </head> <body> <div id="target"> </div> <table> <tr> <th>event type</th> <th>info</th> </tr> <tr> <td>click</td> <td id="elmclick"></td> </tr> <tr> <td>dblclick</td> <td id="elmdblclick"></td> </tr> <tr> <td>mousedown</td> <td id="elmmousedown"></td> </tr> <tr> <td>mouseup</td> <td id="elmmouseup"></td> </tr> <tr> <td>mousemove</td> <td id="elmmousemove"></td> </tr> <tr> <td>mouseover</td> <td id="elmmouseover"></td> </tr> <tr> <td>mouseout</td> <td id="elmmouseout"></td> </tr> <tr> <td>contextmenu</td> <td id="elmcontextmenu"></td> </tr> </table> <table> <tr> <th>key</th> <th>info</th> </tr> <tr> <td>event.altKey</td> <td id="elmaltkey"></td> </tr> <tr> <td>event.ctrlKey</td> <td id="elmctrlkey"></td> </tr> <tr> <td>event.shiftKey</td> <td id="elmshiftKey"></td> </tr> </table> <table> <tr> <th>position</th> <th>info</th> </tr> <tr> <td>event.clientX</td> <td id="elemclientx"></td> </tr> <tr> <td>event.clientY</td> <td id="elemclienty"></td> </tr> </table> <script> var t = document.getElementById('target'); function handler(event){ var info = document.getElementById('elm'+event.type); //이벤트 타입을 확인하기 위해 var time = new Date(); //시간 객체를 만듬 var timestr = time.getMilliseconds(); //현재 시간에 대한 Milliseconds 값, time 객체의 프로퍼티 info.innerHTML = (timestr); //innerHTML을 통해 timestr을 그 자식으로 만들어줌. if(event.altKey){ document.getElementById('elmaltkey').innerHTML = timestr; } if(event.ctrlKey){ document.getElementById('elmctrlkey').innerHTML = timestr; } if(event.shiftKey){ document.getElementById('elmshiftKey').innerHTML = timestr; } document.getElementById('elemclientx').innerHTML = event.clientX; document.getElementById('elemclienty').innerHTML = event.clientY; } t.addEventListener('click', handler); t.addEventListener('dblclick', handler); t.addEventListener('mousedown', handler); t.addEventListener('mouseup', handler); t.addEventListener('mousemove', handler); t.addEventListener('mouseover', handler); t.addEventListener('mouseout', handler); t.addEventListener('contextmenu', handler); </script> </body> </html>
'WEB > JavaScript' 카테고리의 다른 글
| 네트워크 : JSON (0) | 2016.10.19 |
|---|---|
| 네트워크 : Ajax (0) | 2016.10.19 |
| 이벤트 : 기본 이벤트 취소 (0) | 2016.10.17 |
| 이벤트 : 전파 (0) | 2016.10.16 |
| 이벤트 : 등록방법 (0) | 2016.10.16 |
