[자바스크립트] 이벤트(event)

1. 이벤트 정의
자바스크립트에서는 사용자의 요청사항을 이벤트를 통해 처리한다.

 

2. 이벤트의 종류
- onfocus : 해당 영역에 포커스가 주어졌을 때 실행
- onchange : 해당 영역의 입력값이 변하였을 때 실행
- onload : 해당 페이지가 로딩될 때 실행
- onblur : 해당 영역에서 포커스가 벗어났을 때 실행
- onclick : 해당 영역을 클릭했을 때 실행
- onkeydown : 해당 영역을 키보드로 눌렀을 때 실행
- onkeyup : 해당 영역을 키보드로 눌렀다가 떼면 실행
- onkeypress : 해당 영역을 키보드로 계속 누르고 있으면 실행
- onmousemove : 해당 영역에서 마우스가 움직이면 실행
- onmouseover : 해당 영역에 마우스가 올가면 실행
- onmousedown : 해당 영역을 마우스로 누르면 실행
- onmouseup : 해당 영역을 마우스로 눌렀다가 떼면 실행
- onsubmit : 폼 내용을 전송 할 때 실행
- onreset : 폼 내용을 초기화 시킬 때 실행

 

3. 사용 예시
1) 텍스트 박스에 값을 입력 후 포커스가 이동하면 해당 이벤트가 작동해 함수를 실행합니다.
자바스크립트
function setOnblur(){
  alert("포커스가 해당 지역에서 벗어났습니다.");
}

HTML

<input type="text" name="setEvent" id="setEvent" value="이벤트 예" onblur="setOnblur();">

 

2) 셀렉트박스에 값이 변하면 해당 이벤트가 작동해 함수를 실행합니다.
자바스크립트
function setOnchange(){
  var val = $("#setEvent").val();
  alert(val + "으로 값이 변경 되었습니다.");
}

HTML
<select name="setEvent" id="setEvent" onchange="setOnchange();">

  <option value="1">선택1</option>

  <option value="2">선택2</option>

  <option value="2">선택2</option>

</select>