KoXo 자바스크립트 - 이벤트(event)

왼쪽 마우스가 개체 위를 클릭하였을 때 발생한다.

이벤트 속성	object.onclick=handler	JScript 만-
이벤트 속성	object.onclick=GetRef('handler')	VBScript 5.0-
인라인 HTML	<ELEMENT onclick ="handler">	모든 플랫트폼
명명된 스크립트	<SCRIPT for=object event=onclick>	Explorer-

용법

이벤트가 발생하면 'JavascriptCode'를 실행한다.

onclick 이벤트는 광범위한 개체에 사용 될 수 있고, 단순히 클릭하여 JavascriptCode를 직접 실행하게 하거나 기능함수(function)을 호출하여 기능을 실행하게 할 수 있다.

Javascript 에서는: objectName.onclick='JavascriptCode'
HTML 에서는: <ELEMENT onClick="JavascriptCode">

이벤트 특성

Bubbles	있슴
취소	가능
발생 원인	개체를 클릭하였을 때. click 메서드를 작용시켰을 때. 입력 폼에서 ENTER 키를 눌렀을 때. 제어를 위한 접속(access)키를 눌렀을 때. 왼쪽 마우스를 누르거나, 화살표 키를 눌르고 ENTER 키를 눌러 콤보(combo) 박스나, 목록(list) 박스에서 항목을 선택하였을 때.
디폴트 작용	개체와 연관된 작용(action)을 초기화한다. 예를 들어 사용자가 A 개체를 클릭하면, href 속성에 지정된 문서를 브라우저에 읽어드린다. 디폴트 작용을 삭제하기 위해서는, event 개체의 returnValue 속성을 false로 설정한다.
HTML 규격	HTML 4.0 규격

DHTML 개체 모델에서 이벤트처리자는 파라메터들을 직접 받지는 못해도, event개체의 쿼리를 사용할 수 있다.

altKey	ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft	왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
cancelBubble	현재 이벤트가 이벤트처리자들의 계통도에서 버블업(bubble up)하여야 하는가를 반환하거나 설정한다.
clientX	윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수평 좌표를 반환하거나 설정한다.
clientY	윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수직 좌표를 반환하거나 설정한다.
ctrlKey	CTRL 키가 눌렸는가를 반환하거나 설정한다.
ctrlLeft	왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
offsetX	이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수평 좌표를 반환하거나 설정한다.
offsetY	이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수직 좌표를 반환하거나 설정한다.
returnValue	이벤트로 부터의 반환값을 반환하거나 설정한다.
screenX	사용자 스크린에 상대적인 마우스포인터의 수평 위치를 반환하거나 설정한다.
screenY	사용자 스크린에 상대적인 마우스포인터의 수직 위치를 반환하거나 설정한다.
shiftKey	SHIFT 키가 눌렸는가를 반환하거나 설정한다.
shiftLeft	왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement	이벤트를 발생시킨 개체를 반환하거나 설정한다.
type	이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.
x	상대적으로 위치한 모체 개체에 상대적인 위치 수평 좌표를 반환하거나 설정한다.
y	상대적으로 위치한 모체 개체에 상대적인 위치 수직 좌표를 반환하거나 설정한다.

특기

마우스포인터가 개체 위에 있는 상태에서만 왼쪽 마우스를 누르면 개체에서 onclick 이벤트는 발생된다. 또한 onmousedown와 onmouseup 이벤트가 순차적으로 발생된다. 사용자가 마우스를 개체 위에서 누르고 놓지 않은 상태에서 다른 곳으로 이동하면, onclick 이벤트는 발생되지 않는다.

onclick 이벤트는 한 구룹의 제어를 변경시킨다. 이 변화는 개별적인 제어를 변경시키는 것이 아니고 구룹을 위한 이벤트를 초기화한다. 사용자가 한 구룹의 레디오 단추나 체크박스 단추를 클릭하면, 제어 구룹을 위한 onbeforeupdate와 onafterupdate 이벤트들 다음에 onclick 이벤트가 발생된다.

초점을 받을 수 있으나 아직 받지 않는 개체을 클릭하였다면, onfocus 이벤트가 발생된 후에야 onclick 이벤트가 발생된다. 마찬가지로 왼쪽 마우스를 더블클릭하였다면 onclick 이벤트가 발생되고 즉시 ondblclick 이벤트가 발생된다.

onclick 이벤트는 광범위한 HTML 엘레멘트들에 사용될 수 있으나, 키보드에 의한 항해를 위해서는 a, input area, button 엘레멘트들로 제한해 사용하여야 한다. 이 엘레멘트들은 자동적으로 키보드로 탭키에 의한 접속을 허용하기 때문이다.

적용

개체	script	HTML	IE

이벤트로 직접 처리하는 onclick 예제

<FORM>
<INPUT type="button" onClick="alert('직접 경고를 발생시켰다.')" value="여기 클릭하라.")  name="f1">
</FORM>

onclick 이벤트로 기능함수를 호출하여 경고하는 경우

warning() 기능함수는 사용자가 단추를 클릭하면 호출하게 되어 있다.

<SCRIPT>
function warning(){
  alert("클릭 이벤트로 기능함수를 통하여 경고을 발생시켰다.");
}
</SCRIPT>

<FORM>
<INPUT type="button" onClick="warning()" value="여기 클릭하라" name="f2">
</FORM>

onclick 이벤트로 이벤트 내역 보는 예제

이벤트 내역 정보창

여러 개체를 차례로 눌러보라.
연결(<A>) 개체의 내용을 보려면 SHIFT를 누른 상태에서 클릭해 보라. SHIFT를 누르지 않으면 연결로 이동한다.

<SCRIPT>
function clickIt(){
  str='event.srcElement.tagName='+window.event.srcElement.tagName;
  str+='<BR>event.type='+window.event.type;
  str+='<BR>event.shiftKey='+window.event.shiftKey;
  showArea.innerHTML=str;
  if ((window.event.srcElement.tagName=='A')&&(window.event.shiftKey)) window.event.returnValue=false;
}
</SCRIPT>
<BODY onclick="clickIt()">
<DIV id=showArea style=height:3.6em>이벤트 내역 정보창</DIV>

radio, checkbox에서 onclick 이벤트로 이벤트 내역 보는 예제

선택적 레디오 단추
레디오 단추 A1
레디오 단추 A2

체크박스 단추
체크박스 단추

결과 표시창

onclick 이벤트로 구룹제어를 한다.

<SCRIPT>
function checkButton(){
  str='event.Element.tagName='+event.srcElement.tagName+'<BR>';
  str+='event.type='+event.type+'<BR>';
  str+='event.Element.type='+event.srcElement.type+'<BR>';
  str+='event.Element.name='+event.srcElement.name+'<BR>';
  str+='event.Element.id='+event.srcElement.id+'<BR>';
  str+='event.Element.value='+event.srcElement.value+'<BR>';
  str+='event.Element.checked='+event.srcElement.checked+'<BR>';
  show.innerHTML=str;
}
</SCRIPT>
<P>선택적 레디오 단추<BR>
<INPUT type=radio name=nameA id=radioA1 value="레디오 단추 A1" checked onclick="checkButton()"> 레디오 단추 A1<BR>
<INPUT type=radio name=nameA id=radioA2 value="레디오 단추 A2" onclick="checkButton()"> 레디오 단추 A2<BR>
<P>체크박스 단추<BR>
<INPUT type=checkbox name=nameB id=checkB value="체크박스 단추" onclick="checkButton()"> 체크박스 단추<BR>
<DIV id=show style="height:8.5em;width:400;border:solid 1 blue">결과 표시창</DIV>