7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성
폼(form)과 관련된 이벤트는 하나의 form 요소 안에 동작에 의해서 이벤트가 발생하는것과 관련되며 특별한 경우를 제외하고 거의 모든 HTML 요소들에 적용되며 이와 관련한 이벤트 핸들러를 요약하면 다음과 같습니다.
|
이벤트 핸들러 속성 |
설명 |
|
onblur |
요소가 초점(focus)을 잃었을 때 발생하는 blur 이벤트 처리 |
|
onfocus |
요소가 초점(focus)을 받았을 때 발생하는 focus 이벤트 처리 |
|
oncontextmenu |
마우스 오른쪽 버튼을 클릭하면 발생하는 contextmenu 이벤트 처리 |
|
onchange |
요소에 어떤 변화가 발생했을 때 발생하는 onchange 이벤트 처리 |
|
onselect |
input 요소나 textarea 요소의 텍스트(text)가 선택되었을 때 발생하는 select 이벤트 처리 |
|
onsubmit |
하나의 form이 제출(submit)될 때 발생하는 submit 이벤트 처리 |
위에서 blur, focus 이벤트에 대한 이벤트
핸들러에 대한 부분은 이미 window와 관련된 부분에서 다루었으므로 넘어가고 마우스 오른쪽 버튼을
클릭하면 발생하는 contextmenu 이벤트와 이에 대한 처리를 어떻게 하는지 예제를 통해 알아봅니다.
이번 예제는 웹 페이지에서
이미지를 다운로드할 수 없도록 마우스 오른쪽 버튼을 클릭하면 팝업 메뉴가 나타나지 않도록 하는 예제입니다. 이
예제를 통해 마우스 오른쪽 버튼을 클릭하면 발생하는 contextmenu 이벤트와 이를 처리하는 과정을
이해하도록 해볼까요? 메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>contextmenu event 예제</title>
<script type="text/javascript">
function contextmenuFunc() {
alert("이미지 다운로드가 허용되지 않습니다.")
}
</script>
</head>
<body >
<p>이미지 위에서 마우스 오른쪽 버튼 클릭</p>
<img oncontextmenu="contextmenuFunc()"
src="flower2.jpg" width="100" height="70">
</body>
</html>
위와 같이 작성하고
“contextmenuEvent.html”로 저장하고 IE9를
통해 열어보면 “flower2.jpg” 이미지가 나타나며 이미지에서 마우스 오른쪽 버튼을 클릭하면 다음과
같이 contextmenu 이벤트가 발생하여 이와 관련된 이벤트 핸들러 속성인 oncontextmenu 에 연결된 contextmenuFunc() 함수를
실행하여 “이미지 다운로드가 허용되지 않습니다.”라는 알림창을
나타냅니다.
위에서 알림창의 확인 버튼을 클릭하면 다음과 같이 contextmenu가 나타납니다.
이 결과는 이미지를
다운로드할 수 없도록 마우스 오른쪽 버튼을 클릭하면 팝업 메뉴가 나타나지 않도록 하려는 원래의 의도와는 맞지 않는 결과입니다. 원래의 의도대로 팝업 메뉴가 뜨지 않도록 하려면 다음과 같이 img 요소
태그 안을 수정해주면 됩니다.
<img
oncontextmenu="contextmenuFunc(); return
false"
src="flower2.jpg" width="100" height="70">
즉 이벤트 핸들러
속성값에 “return false” 와 같은 형태로 설정해주면 원래는 팝업메뉴가 뜨는 것이 정상인데
이를 뜨지 못하도록 하는 역할을 합니다.
다음으로 onchange 이벤트 핸들러 속성에 대해서 예제를 통해 그 사용 방법을 알아볼까요?
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>onchange event 예제</title>
<script
type="text/javascript">
function updated(element) {
var idx = element.selectedIndex;
var val =
element.options[idx].value;
var content =
element.options[idx].innerHTML;
alert("선택한 제품은 "+ val +
"항목 " + content + "입니다.");
}
</script>
</head>
<body >
<p>구매할 스마트폰 선택</p>
<select name="select"
onchange="updated(this)">
<option value="1">아이폰</option>
<option value="2">안드로이드폰</option>
<option
value="3">Mango폰</option>
</select>
</body>
</html>
위에서 선택
가능한 리스트를 나타내는데 사용되는 select 요소와 그 안에
option 요소를 이용하여 3개의 선택 가능한 제품 항목을 작성합니다.
그 다음 select 요소에서 변화가 발생했을 때 발생하는 onchange 이벤트 발생시 처리해 줄 함수를 위와 같이
updated(this) 형태로 명시하고 다음으로 <script>…</script>
블록 안에서 “function updated(element)”와 같은 형태로 입력 파라미터가
요소(element) 타입이라는 것을 명시한 후 넘어오는 요소가
select 요소이므로 select 요소의
selectedIndex 속성을 이용하여 어떤 option 요소가 선택되었는지 파악합니다.
그리고 선택된 option 요소의 value 속성을
이용하여 해당 value 속성값을 얻고 마지막으로 innerHTML 속성을
이용하여 “아이폰”, “안드로이드폰”과 같은 option 요소의 텍스트값, 즉 요소값을 구하게 됩니다. 이제 “onchangeEvent.html”로 저장하고 IE9로 열면 다음과
같이 나타나며 드롭다운 리스트에서 원하는 항목을 선택하면 이에 지는 결과를 출력하게 됩니다.
다음으로 input 요소나 textarea 요소의 텍스트(text)가 선택되었을 때 발생하는 select 이벤트 처리하는 onselect 이벤트 핸들러 속성에 대해서 알아보기 위해서 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>onselect event 예제</title>
</head>
<body >
<form>
<input
type="text" value="노트북" onselect="alert('노트북 선택')">
</form>
</body>
</html>
위 코드에서와 같이 input 요소의 “노트북”이라는 텍스트(text)를 선택(select)하면 select 이벤트가 발생하여 알림창을 띄워 “노트북 선택” 메시지를 표시하도록 하는 코드로 “onselectEvent.html”로 저장하고 IE9로 열고 다음과 같이 각각 일부 문자를 선택하거나 전체 문자열을 선택할 경우 모두 내부적으로 select 이벤트가 발생합니다.
그래서 알림창을
통해 “노트북 선택” 이라는 메시지를 표시하게 되는 것입니다.
마지막으로 하나의 form이 제출(submit)될 때 발생하는 submit 이벤트 처리하는데 사용되는 onsubmit 이벤트 핸들러 속성을 어떻게 사용할 수 있는지 알아볼까요?
메모장을 열어서 다음과 같이 name 속성값이 “yourname”인 input 요소에 텍스트(text)를 입력하고 type 속성이 “submit”인
input 요소를 클릭하면 submit 이벤트가 발생하여 경고창에 name 속성값이 “yourname”인 input 요소의 텍스트(text)를 표시하도록 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>onsubmit event 예제</title>
<script type="text/javascript">
function submitData(element){
alert("제출된 이름 : " + element.yourname.value);
}
</script>
</head>
<body >
<form
name="ourform" onSubmit="submitData(this)">
<input type="text"
name="yourname">
<input type="submit"
VALUE="제출(submit)">
</form>
</body>
</html>
작성이 완료되었으면 “onsubmitEvent.html”로
저장하고 IE9로 열어 다음과 같이 자신이 원하는 텍스트를 입력합니다.
그 다음 제출(submit)을 클릭하면 내부적으로 submit 이벤트가 발생하여 다음과 같이 알림창에 현재 name 속성값이 “yourname”인 input 요소의 텍스트(text)를 표시합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8. DOM(Document Object Model) (0) | 2013.08.06 |
|---|---|
| 7.2 Event Method를 이용한 이벤트 처리 (0) | 2013.08.06 |
| 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7.1.1 window와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
