("수정"누른 상태로 읽을 것)
- 기본동작의 취소
- 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
- 이러한 기본적인 동작들을 기본 이벤트라고 하는데, 사용자가 만든 이벤트를 이용해서 기본 동작을 취소할 수 있다.
- form 태그 처리
2-1. input
- 태그에 지정되는 name속성을 통하여 객체를 획득 가능하다. let myform = document.form1;
-
form 객체는 자신이 포함한 모든 , , ... 태그에 대한 하위 객체를 갖는다. 이 하위 객체들은 name 속성을 통하여 접근할 수 있다. let user_name = myform.user_name; let user_name = document.form1.user_name; 입력값의 설정: 텍스트 입력 형식의 컴포넌트가 가지고 있는 value 속성에 문자열을 대입하면, 입력 컴포넌트의 내용을 JavaScript에서 강제로 설정할 수 있다. document.form1.user_name.value = "phw" 2-2. select 태그 안에 포함된 태그 중에서 몇번째 항목이 선택되었는지를 파악하기 위해서는 태그 객체의 selectedIndex 속성을 사용한다. 선택 위치는 0부터 시작 ----선택하세요---- 항목1 항목2
-
사용자가 선택한 위치 : document.form2.sel1.selectedIndex;
-
태그 객체의 selectedIndex 속성에 임의의 숫자값을 대입하면 대입한 위치에 해당하는 태그가 강제로 선택된다. : document.form2.sel1.selectedIndex = 1; (인덱스는 0부터 시작) 선택 항목의 값 조회 : 태그의 객체는 하위 태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성값으로 사용하면, 선택한 태그의 객체를 획득할 수 있다.
: document.form2.sel1[document.form2.sel1.selectedIndex].value
2-3. 라디오버튼
- 라디오버튼도 하나의 그룹으로 묶기 위해서 name 속성의 값을 동일하게 지정하기 때문에 javascript에서 name속성을 통하여 접근할 경우 배열로 처리된다는 공통점을 가지고 있다.
- document.form3.gender[1].value; : 2번째 요소의 value값을 획득
- document.form3.gender[1].checked; : 체크 여부
- document.form3.gender[1].checked = true : 강제 체크
- document.form3.gender[1].checked = false : 강제 체크 해제
- 마우스 이벤트
- click : 클릭했을 때
- dbclick : 더블 클릭했을 때
- mousedown : 마우스를 누를 때
- mouseup : 마우스 버튼을 땔 때
- mousemove : 마우스를 움직일 때
- mouseover : 마우스가 엘리먼트에 진입할 때
- mouseout : 마우스가 엘리먼트에서 빠져나갈 때
- contextmenu : 컨텍스트 메뉴가 실행될 때
