2016. 5. 2. 10:11ㆍlanguage/javascript
이벤트에 대해서 알아보겠습니다.
이벤트(event)란 모든 행위(?)를 말하는 것으로 프로그램에서는 미리 사용자의 행위를
예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있습니다.
예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 하기 위해서 click 이벤트가 준비되어 있습니다.
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다.
이것이 일종의 이벤트입니다.
이벤트 핸들러란 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다.
우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면 됩니다.
이벤트와 이벤트 핸들러를 연결하는 방법을 간단하게 살펴보겠습니다.
기본적인 2가지 방법을 살펴볼텐데 첫번째는 태그에 직접 지정하는 방법과 두번쨰로 script 태그 안에서 지정하는 방법에 대해서 설명합니다.
tip으로 마우스 오른쪽 클릭 방지(마우스 우클릭 방지) 에 대해서도 설명합니다.
1. 태그에 직접 지정
<태그명 ... on이벤트명(이벤트 종류) = "이벤트핸들러"> 내용 </태그명>
이곳의 이벤트핸들러 영역은 자바스크립트 영역과 같다.(이벤트핸들러 자리에 자바스크립트 언어사용가능)
|
1
2 |
<body onload="alert('안녕하세요');">
|
cs |
이벤트 핸들러의 내용이 복잡하거나 많으면 이 부분을 함수로 만들고
이벤트 핸들러에서 이 함수를 호출하는 식으로 작성한다.
|
1
2
3
4
5
6
7 |
<body onload="insa();">
<script>
function insa(){
alert("반갑");
}
</script>
|
cs |
2. script태그 안에서 지정
1) 객체명.on이벤트명 = 함수명;
|
1
2
3
4
5
6
7
8 |
<script>
window.onload = insa;
function insa(){
alert("반갑");
}
</script>
|
cs |
2) 객체명.on이벤트명 = function(){처리할 내용; ...}
|
1
2
3
4
5
6 |
<script>
window.onload = function(){
alert("반갑반갑");
}
</script>
|
cs |
tip : 마우스 오른쪽 클릭 방지하기, 마우스 우클릭 방지
마우스 오른쪽 클릭 방지하기는 생각보다 아주 간단하게 작성할 수 있습니다.
|
1
2
3
4
5
6
7
8 |
<script type="text/javascript">
document.onmousedown = click;
function click(){
if(event.button == 2){
alert("죄송합니다. \n 오른쪽 마우스는 사용할 수 없습니다.");
}
}
</script> |
cs |
2# : mousedown 이벤트를 활용합니다. 마우스를 누를 경우에 대한 이벤트 입니다. 마우스가 눌려졌을때 click 함수를 실행합니다.
4# : event 객체를 사용합니다. IE에서는 이벤트 핸들러에서 이벤트에 대한 정보를 가지고 있는 객체입니다. 누른 버튼의 종류에 따라 event.button에 다른 값이 저장됩니다. 1:왼쪽버튼, 2:오른쪽버튼, 4:가운데버튼
위와 같이 이벤트를 활용하여 마우스 오른쪽 클릭방지(마우스 우클릭 방지) 를 쉽게 구현할 수 있습니다.
아래는 이벤트 종류와 의미, 메서드, 속성 등의 대한 설명입니다.
■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트 앞에 on을 붙여 준다)
blur 포커스를 다른곳으로 옮길 경우
click 링크나 폼의 구성원을 클릭할 때
change 선택값을 바꿀 경우
focus 포커스가 위치할 경우
mouseover 마우스가 올라올 경우
mouseout 마우스가 떠날 경우
mousedown 마우스를 누를 경우
mousemove 마우스를 움직일 경우
mouseup 마우스를 눌렀다 놓을 경우
select 입력양식의 하나가 선택될 때
submit 폼을 전송하는 경우
load 페이지,윈도우가 브라우져로 읽혀질 때
unload 현재의 브라우저,윈도우를 떠날 때
error 문서나 이미지에서 에러를 만났을 때
reset 리셋 버튼이 눌렸을 때
dbclick 더블클릭시
dragdrop 마우스 누르고 움직일 경우
keydown 키 입력시
keypress 키 누를 때
keyup 키를 누르고 놓았을 때
move 윈도우나 프레임을 움직일 때
resize 윈도우나 프레임 사이즈를 움직일 때
■ 메서드
blur() 입력 포커스를 다른 곳으로 이동시킴
click() 마우스 버튼이 눌러진 것처럼 해줌
focus() 입력 포커스를 준 것처럼 해줌
submit() 폼의 submit 버튼을 누른 것처럼 해줌
select() 메소드 폼의 특정 입력 필드를 선택함
■ 속성
event.keyCode 누른 키의 ASCII 정수 값
event.x 문서 기준 누른 좌표의 left
event.y 문서 기준 누른 좌표의 top
event.clientX 문서 기준 누른 좌표의 left
event.clientY 문서 기준 누른 좌표의 top
event.screenX 콘테이너 기준 누른 좌표의 left
event.screenY 콘테이너 기준 누른 좌표의 top
■ 브라우저 객체별 이벤트 핸들러
선택 목록(SELECT) onBlur, onChange, onFocus
문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
버튼(BUTTON) onClick
체크박스(CHECKBOX) onClick
라디오 버튼(RADID) onClick
링크 onClick, onMouseover
RESET 버튼(RESET) onClick
SUBMIT 버튼(BUTTON) onClick
DOCUMENT onLoad, onUnload
WINDOW onLoad, onUnload
폼(FORM) onSubmit
'language > javascript' 카테고리의 다른 글
| javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지 (16) | 2016.12.09 |
|---|---|
| dwr 에서 request, session 사용하기 / WebContextFactory is deprecated (0) | 2016.12.08 |
| javascript | 모바일 브라우저 userAgent로 디바이스 구분하기 / android ios 구분하기 (0) | 2016.08.10 |
| javascript 계산기 / 자바스크립트 계산기 만들기 (2) | 2016.06.28 |
| javascript history 삭제 / href replace 비교 (4) | 2016.06.01 |
| [javascript 기초 강좌] 11. 객체 관련 명령어 [ for ~ in, with ] (0) | 2016.04.20 |
| [javascript 기초 강좌] 10. 클래스 정의 / 객체 사용하기 /class 생성 (2) | 2016.03.15 |
| [javascript 기초 강좌] 9. 사용자 정의함수를 이용한 구구단 만들기 (2) | 2016.01.29 |
| [javascript 기초 강좌] 8. 사용자 정의 함수 (0) | 2016.01.28 |
| [javascript 기초 강좌] 7. 내장함수 ( eval / parseInt / parseFloat / Number / isFinite / isNaN / escape / unescape / encodeURI / decodeURI / encodeURIComponent / decodeURIComponent ) (0) | 2016.01.27 |