[ 자바스크립트. JavaScript ] 이벤트(Event) 핸들러 간단예제, 이벤트(Event) 객체를 알아보자
1. 이벤트 핸들러와 예제
이벤트 핸들러(처리기)는 이벤트 핸들러를 사용하고자 하는 곳에서 하나의 속성으로 사용이 된다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>자바스크립트 이벤트 핸들러</title> </head> <body onload="alert('안녕하세요..')" onunload="alert('안녕히가세요')"> <h1>자바스크립트<p>열심히 공부하자!</h1> </body> </html> | cs |
▲ 실행 초기 화면
▲ 다시 읽을 때의 화면
1. 이벤트(event) 객체
event 객체는 이벤트에 대한 모든 정보를 제공해주는데 넷스케이프 4.0이 출시되면서 생겨난 객체이다. event 객체는 이벤트의 종류, 이벤트가 전달될 객체 이벤트 발생 위치등을 가지고 있다.
더 자세하게 이벤트 객체를 알아보자!
속성 |
기능 |
type |
이벤트 종류에 대해 지정해준다. |
target |
이벤트가 전달되는 객체를 지정해준다. |
layerX |
layer를 기준으로 이벤트가 발생하는 위치의 x좌표를 지정한다. |
layerY |
layer를 기준으로 이벤트가 발생하는 위치의 y좌표를 지정한다. |
pageX |
문서의 쪽을 기준으로 이벤트가 발생하는 위치의 x좌표를 지정한다. |
pageY |
문서의 쪽을 기준으로 이벤트가 발생하는 위치의 y좌표를 지정한다. |
screenX |
디스플레이의 화면을 기준으로 이벤트가 발생하는 위치의 x좌표를 지정한다. |
screenY |
디스플레이의 화면을 기준으로 이벤트가 발생하는 위치의 y좌표를 지정한다. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>자바스크립트 이벤트 객체</title> </head> <script language="JavaScript"> function mouseDownEvent(e) { document.write("이벤트의 type: " + e.type); if (e.which == 1) { document.write("마우스 왼쪽 버튼" + "<br>") } else if (e.which == 3) { document.write("마우스 오른쪽 버튼" + "<br>") } document.write("페이지의 이벤트 발생 위치: (" + e.pageX + "," + e.pageY + ")") document.write("화면의 이벤트 발생 위치: (" + e.screentX + "," + e.screenY + ")") document.write("<br"); return true; } //마우스 버튼을 눌렀을 때 mouseDownEvent 함수 호출.. document.onmousedown = mouseDownEvent; </script> <body> </body> </html> | cs |
▲ 제가 사용하는 스윙브라우저와 인터넷익스플로러11은 지원이 안되는듯한... 그래서 크롬으로 돌렸더니 잘 뜨네요.
3. Event 잡아채기
event 잡아채기 기능은 넷스케이프 4.0이 출시되면서 새롭게 등장한 기능으로 이벤트를 잡아채면 대상이 되는 객체에 이벤트가 전달되기 때문에 이벤트를 쉽게 처리할 수 있다. 예를 들어 길을 html로 가야하는데 자바 스크립트로 강제로 데리고 올 수 있는것이다.
이벤트를 잡아채기 위한 메소드와 기능은 다음과 같다.
메소드 |
기능 |
captureEvents |
웹 페이지에서 발생할 수 있는 이벤트 중에서 잡아채울 이벤트를 지정해준다. |
releaseEvents |
captureEvents로 잡아챈 이벤트를 해제해준다. |
routeEvent |
잡아챈 이벤트를 처리할 때 사용하며, 잡아챈 이벤트를 처리할 이벤트 처리기가 있는 경우 해당 이벤트 처리기에 전달하게 된다. |
handleEvent |
잡아챈 이벤트를 이벤트 핸들러로 전달해준다. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>자바스크립트 captureEvent 메소드</title> </head> <script language="JavaScript"> function clickEvent(e) { alert("잡아챈 이벤트"); return routeEvent(e); } //마우스 클릭 이벤트 핸들러 잡아채기 document.captureEvents(Event.CLICK); //마우스 버튼을 클릭했을 때 clickEvent 이벤트 핸들러 호출 document.onclick = clickEvent; //자바 스크립트 종료 </script> <body> <form> <input type="button" name="버튼1" value="첫번째 버튼입니다." onclick="alert('첫번째 버튼의 이벤트입니다.');return true;"> <input type="button" name="버튼2" value="두번째 버튼입니다." onclick="alert('두번째 버튼의 이벤트입니다.');return true;"> </form> </body> </html> | cs |
▲ 처음 시작시 이벤트 발생 → 첫번째 버튼 클릭시 화면, 두번째 버튼 클릭시 화면...
이 테스트도 크롬으로 시작하였음..
'이전 게시글 > 컴퓨터#웹 Jv.Script' 카테고리의 다른 글
| [자바스크립트] window(윈도우) 객체, 객체의 메소드와 간단예제 (0) | 2016.04.17 |
|---|---|
| [자바스크립트] 객채에서 자주 사용되는 키워드(this,with,forin,typeof) (0) | 2016.04.17 |
| js 파일로 연결하여 사용 시 한글 깨짐 현상 (0) | 2016.03.21 |
| [자바스크립트] change 이벤트 뜻과 간단예제 (0) | 2016.03.01 |
| [자바스크립트] Click(클릭) 이벤트 간단한 사용예제 (0) | 2016.03.01 |
