JavaScript의 이벤트

1. 이벤트

1-1. this

• 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해 참조할 수 있다.

1-2. 이벤트 등록방식 : inline

• 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것
• 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다.
• 하지만 정보인 HTML과 제어인 Javascript가 혼재된 형태이기 때문에 바람직한 방법이라고 할 수는 없다.

1-3. property listener

• 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
• 인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이다.

1-4. 이벤트 객체

• 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
• 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.

1-5. EventListener

• 이벤트 등록하는 가장 권장되는 방식이다.

2. 기본 동작의 취소

• 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.

  a태그를 클릭하면 href 속성의 url 이동

  • 폼에서 submit 버튼을 누르면 데이터가 전송된다.

2-1. inline

• return 방식이 false이면, 기본 동작 취소

3. 마우스 이벤트

• 웹 브라우저는 "마우스와 관련"해서 다양한 "이벤트 타입"을 지원
  

3-1. 마우스 이벤트의 종류

click : 클릭했을때
dblclick : 더블클릭
mousedown : 마우스를 누를때
mouseup : 마우스 버튼을 땔 때
mousemove : 마우스를 움직일 때
mouseover : 마우스가 엘리먼트에 진입 할 때
contextmenu : 컨텍스트 메뉴가 실행될 때

4. form 태그

4-1. 드롭다운 박스

• <select>태그 안에 포함된 <option>태그 중에서 몇 번쨰 항목이 선택되었는지를 파악하기 위해서는 <select>태그 객체의 selectedIndex 속성을 사용한다.
• 선택 위치는 0부터 0부터 시작한다.
  (가장 첫 번째 <option> 태그가 0이다)
• <select> 태그 객체의 selectedIndex 속성에
  임의의 숫자값을 대입하면 대입한 위치에 해당하는 <option> 태그가 강제로 선택된다.

document.form1.sel.selectedIndex = 2

• <select>태그의 객체는 하위 <option>태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성값으로 사용하면 선택한 <option>태그의 객체를 획득 할 수 있다.
• 선택한 <option>태그를 의미하는 객체의 value 속성은 사용자가 선택한 항목의 값을 의미한다.

document.form1.sel[document.form1.sel.selectedIndex].value

4-2. 라디오 버튼

• name 속성의 값을 동일하게 지정하기 때문에 javascript에서 name 속성을 통하여 접근 할 경우 배열로 처리된다는 공통점을 가지고 있다.
  document.form1.gender[0].value로 값을 획득

1. 체크박스 체크 상태를 검사
document.form1.gender[0].value.checked
2.첫 번째 항목을 강제로 체크하는 경우
document.form1.gender[0].value.checked = true;

4-3. 작성된 내용을 전송하기

• form 객체의 submit() 함수는 <form> 태그의 action 속성에 명시된 파일로 사용자의 작성내용을 전송한다.
• submit() 함수는 <input type="submit"/>버튼을 클릭한 것과 동일한 효과를 얻을 수 있다.

document.form1.submit();

4-4. 작성된 내용을 리셋하기

• form 객체는 작성된 내용을 리셋하기 위한 reset() 함수를 찾는다.
  이 함수를 호출하게 되면 <input type="reset"/> 버튼을 클릭한 것과 동일한 효과를 얻을 수 있다.

document.form1.reset();