[이벤트] 6. 폼과 이벤트 활용

- 폼 요소에는 키 관련 이벤트, 포커스 관련 이벤트, change 이벤트 등 많은 이벤트가 발생한다.

 

onblur와 onfocus

- 이들은 포커스(focus)가 변경될 때 호출된다.

- 포커스는 키 입력에 대한 독점권

- HTML 요소가 포커스를 받게 될 때는 onfocus 리스너가 호출되고 포커스를 잃으면 onblur 리스너가 호출된다.

 

라디오버튼과 체크박스

1) 라디오버튼 객체

 radio 객체는 <input type="radio">로 만들어진 라디오버튼을 나타내는 DOM 객체이다.

<form>
	<input type="radio" name="city" value="seoul">서울
    <input type="radio" name="city" value="busan">부산
    <input type="radio" name="city" value="chuncheon">춘천
</form>

 태그의 name 속성이 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성값으로 radio 객체를 찾아야 한다.

var koreaCity = document.getElementsByName("city");

* getElementsByName()은 HTML태그의 name 속성 값이 일치하는 HTML 태그를 모두 찾아 컬렉션을 만들어 리턴하는 메소드이다. (앞서서 컬렉션으로 만들어 리턴되면 배열로 사용할 수 있다고 했다!)

 

2) 선택된 라디오버튼 알아내기

 선택 상태인 라디오 버튼을 알아내기 위해서는 radio 객체의 checked 프로퍼티를 조사하면 된다.

 라디오 버튼은 하나밖에 선택을 못하니까 코드도 이런 것임

var found = null;
var koreaCity = document.getElementsByName("city");

for(var i = 0 ; i < KoreaCity.length; i++){
	if(koreaCity[i].checked == true) 
    	found = koreaCity[i];
 }
 
 if(found!=null)
 	alert(found.value + "이 선택되었음");
 else
 	alert("선택된 것이 없음");

 

3) 체크박스 객체

- checkbox 객체는 radio 객체들과는 다르게 그룹을 형성하지 않기 때문에 name 속성(프로퍼티)이 모두 다르다.

 

4) select 객체와 onchange

- select 객체는 <select> 태그에 의해 만들어진 콤보박스를 나타내며 option 객체는 <option> 태그로 표현되는 옵션 아이템을 나타낸다. 

- 선택된 옵션 알아내기 : select 객체의 selectedIndex로 알아낼 수 있다. (selectedIndex 값이 음수이면 아무 옵션도 선택되지 않은 상태)

- select와 onchange 리스너 : select 객체에 다른 옵션이 선택되면 onchange 리스너가 호출된다.

- select 객체의 프로퍼티

• length(옵션 개수)
• selectedIndex(선택된 옵션의 인덱스 번호)
• ize(콤보박스에 보여지는 옵션의 개수)

- select 객체의 컬렉션

• options(콤보 박스에 들어 있는 모든 옵견 객체(option 타입)들의 컬렉션

- option 객체의 프로퍼티

• selected(옵션이 선택되었으면 true)
• text(옵션 문자열)
• value (value 속성 문자열)

5) 키 이벤트, onkeydown, onkeypress, onkeyup

- 키와 관련된 이벤트 리스너는 onkeydown, onkeypress, onkeyup 3개있음

• onkeydown : 모든 키에 대해 키가 눌러지는 순간 호출
• onkeypress : <Enter> <Space><ESC> 키와 문자키에 대해서만 키가 눌러지는 순간 추가 호출, <F1> <shift> <PgDn> <Del> <Ins> 등 문자키가 아닌 경우 호출되지 않음
• onkeyup : 모든 키에 대해 눌러진 키가 떼어지는 순간 호출