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 규격

event ⇒

onclick 이벤트⇒

⇒

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
a	a.onclick=sCode	<A onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
address	address.onclick=sCode	<ADDRESS onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
applet	applet.onclick=sCode	<APPLET onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
area	area.onclick=sCode	<AREA onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
b	b.onclick=sCode	<B onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
bdo	bdo.onclick=sCode	<BDO onclick=sCode>	IE5(win16,win32,unix,mac)
big	big.onclick=sCode	<BIG onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
blockQuote	blockQuote.onclick=sCode	<BLOCKQUOTE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
body	body.onclick=sCode	<BODY onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
button	button.onclick=sCode	<BUTTON onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
caption	caption.onclick=sCode	<CAPTION onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
center	center.onclick=sCode	<CENTER onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
cite	cite.onclick=sCode	<CITE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
code	code.onclick=sCode	<CODE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
custom	custom.onclick=sCode	<CUSTOM onclick=sCode>	IE5(win32,unix)
dd	dd.onclick=sCode	<DD onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
dfn	dfn.onclick=sCode	<DFN onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
dir	dir.onclick=sCode	<DIR onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
div	div.onclick=sCode	<DIV onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
dl	dl.onclick=sCode	<DL onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
document	document.onclick=sCode	없음	IE4.0(win16,win32,ce,unix,mac)
dt	dt.onclick=sCode	<DT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
em	em.onclick=sCode	<EM onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
embed	embed.onclick=sCode	<EMBED onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
fieldSet	fieldSet.onclick=sCode	<FIELDSET onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
font	font.onclick=sCode	<FONT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
form	form.onclick=sCode	<FORM onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
hn	hn.onclick=sCode	<hn onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
hr	hr.onclick=sCode	<HR onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
i	i.onclick=sCode	<I onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
img	img.onclick=sCode	<IMG onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
button	button.onclick=sCode	<INPUT type=button onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
checkbox	checkbox.onclick=sCode	<INPUT type=checkbox onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
FileUpload	FileUpload.onclick=sCode	<INPUT type=file onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
image	image.onclick=sCode	<INPUT type=image onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
password	password.onclick=sCode	<INPUT type=password onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
radio	radio.onclick=sCode	<INPUT type=radio onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
reset	reset.onclick=sCode	<INPUT type=reset onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
submit	submit.onclick=sCode	<INPUT type=submit onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
text	text.onclick=sCode	<INPUT type=text onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
kbd	kbd.onclick=sCode	<KBD onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
label	label.onclick=sCode	<LABEL onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
legend	legend.onclick=sCode	<LEGEND onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
li	li.onclick=sCode	<LI onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
listing	listing.onclick=sCode	<LISTING onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
map	map.onclick=sCode	<MAP onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
marquee	marquee.onclick=sCode	<MARQUEE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
menu	menu.onclick=sCode	<MENU onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
nextID	nextID.onclick=sCode	<nextID onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
noBR	noBR.onclick=sCode	<NOBR onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
Object	Object.onclick=sCode	<OBJECT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
ol	ol.onclick=sCode	<OL onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
p	p.onclick=sCode	<P onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
plainText	plainText.onclick=sCode	없음	IE4.0(win16,win32,ce,unix,mac)
pre	pre.onclick=sCode	<PRE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
rt	rt.onclick=sCode	<RT onclick=sCode>	IE5(win16,win32,unix,mac)
ruby	ruby.onclick=sCode	<RUBY onclick=sCode>	IE5(win16,win32,unix,mac)
s	s.onclick=sCode	<S onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
samp	samp.onclick=sCode	<SAMP onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
select	select.onclick=sCode	<SELECT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
small	small.onclick=sCode	<SMALL onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
span	span.onclick=sCode	<SPAN onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
strike	strike.onclick=sCode	<STRIKE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
strong	strong.onclick=sCode	<STRONG onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
sub	sub.onclick=sCode	<SUB onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
sup	sup.onclick=sCode	<SUP onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
table	table.onclick=sCode	<TABLE onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
tBody	tBody.onclick=sCode	<TBODY onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
td	td.onclick=sCode	<TD onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
textArea	textArea.onclick=sCode	<TEXTAREA onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
tFoot	tFoot.onclick=sCode	<TFOOT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
th	th.onclick=sCode	<TH onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
tHead	tHead.onclick=sCode	<THEAD onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
tr	tr.onclick=sCode	<TR onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
tt	tt.onclick=sCode	<TT onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
u	u.onclick=sCode	<U onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
ul	ul.onclick=sCode	<UL onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
var	var.onclick=sCode	<VAR onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)
xmp	xmp.onclick=sCode	<XMP onclick=sCode>	IE4.0(win16,win32,ce,unix,mac)

참조	onclick 이벤트	onmouseover 이벤트	onmousedown 이벤트	onmousemove 이벤트
	ondblclick 이벤트	onmouseout 이벤트	onmouseup 이벤트	click 메서드	button 속성

event ⇒

onclick 이벤트⇒

⇒

이벤트로 직접 처리하는 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>

event ⇒

onclick 이벤트⇒

⇒

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>

onclick, ondblclick 예제

event ⇒

onclick 이벤트⇒

⇒

event ⇒

onclick 이벤트

⇒

최종 수정:
06/27/2025 19:23:52

비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다.
오류가 나면 정상적 접속으로 시도해 보세요.

http://koxo.com/lang/js/event/onclick.html