Event ๋ž€?

์ด๋ฒคํŠธ๊ฐ€ ๋ญ˜๊นŒ์š”? ์ด๋ฒคํŠธ๋Š” ์–ด๋–ค ๋™์ž‘์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์›น๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋˜๋Š” ์›น๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๋Š” ๊ฒƒ์„ ์ด๋ฒคํŠธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์ผํŒŒํ‹ฐ๋‚˜ ์ถ•ํ•˜์ด๋ฒคํŠธ ๊ฐ™์€ ๊ทธ๋Ÿฐ ๊ฒƒ๊ณผ ํ˜ผ๋™ํ•˜์‹œ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค ใ…‹ใ…‹ใ…‹

 

๊ฐ€์žฅ ํ”ํ•˜๊ฒŒ ์“ฐ์ด๋Š” ์ด๋ฒคํŠธ๋Š” ํด๋ฆญ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋Š” ๊ฒƒ. ์ด๊ฒƒ๋„ ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ์ด์ฃ .

๊ทธ๋Ÿผ ์˜จํด๋ฆญ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์‚ดํŽด๋ณผ๊นŒ์š”? 

onclick ์˜ˆ์ œ

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

 

์œ„ ์†Œ์Šค๋Š” ํ™”๋ฉด์— ๋ฒ„ํŠผ์„ ํ•˜๋‚˜ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด sayHello()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

onsubmit ์˜ˆ์ œ

onclick ์ด๋ฒคํŠธ ๋‹ค์Œ์œผ๋กœ ๋งŽ์ด ์“ฐ์ด๋Š”๊ฒŒ ์•„๋งˆ onsubmit์ด๋ฒคํŠธ์ผ๊ฒ๋‹ˆ๋‹ค. ์ด ์ด๋ฒคํŠธ๋Š” ํผ ํƒœ๊ทธ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ submitํ•˜๊ฒŒ ๋˜๋ฉด ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์ฃ .

  

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
   // ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์—ฌ๊ธฐ๋‹ค๊ฐ€ ํ•˜์‹œ๋ฉด๋ฉ๋‹ˆ๋‹ค.
   .........
   return true  // or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

 

์œ„ ์†Œ์Šค๋ฅผ ๋ถ„์„ํ•ด๋ณด๋ฉด...์Œ...submit๋ฒ„ํŠผ์ด ์žˆ๊ณ  submit๋ฒ„ํŠผ์ด ๋ˆŒ๋ฆด๋•Œ return validate()๋ฅผ ํ•˜๋Š”๋ฐ ์ด๋Š” validate()์—์„œ ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

โ€‹

onmouseover ์™€ onmouseout:

์ด ์ด๋ฒคํŠธ๋“ค์€ ๋งˆ์šฐ์Šค๊ฐ€ ํ™”๋ฉด์˜ ํŠน์ • ์ง€์—ญ ์•ˆ์— ์žˆ๋Š”์ง€ ๋˜๋Š” ํŠน์ • ์ง€์—ญ ์•ˆ์— ์žˆ๋‹ค๊ฐ€ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ”๋Š”์ง€๋ฅผ ์ฒดํฌํ•˜์—ฌ ํŠน์ • ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด์ฃ .

 

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

 

๋งˆ์šฐ์Šค๊ฐ€ <div>ํƒœ๊ทธ ๋‚ด์˜ ๋‚ด์šฉ๋ฌผ ( ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ) ์œ„์— ์žˆ์œผ๋ฉด over()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๋ฉด out()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. 

 

HTML 4 ํ‘œ์ค€ ์ด๋ฒคํŠธ

์•„๋ž˜๋Š” ํ‘œ์ค€ ์ด๋ฒคํŠธ๋“ค์˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ์œ„์—์„œ ํ•ด๋ณธ๊ฒƒ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ด๋Ÿฐ์ €๋Ÿฐ ๊ธฐ๋Šฅ๋“œ์„ ํ•œ๋ฒˆ ํ…Œ์ŠคํŠธ ํ•ด๋ณด์„ธ์š”~~ ^___^

 

EventValueDescription
onchangescriptScript runs when the element changes
onsubmitscriptScript runs when the form is submitted
onresetscriptScript runs when the form is reset
onselectscriptScript runs when the element is selected
onblurscriptScript runs when the element loses focus
onfocusscriptScript runs when the element gets focus
onkeydownscriptScript runs when key is pressed
onkeypressscriptScript runs when key is pressed and released
onkeyupscriptScript runs when key is released
onclickscriptScript runs when a mouse click
ondblclickscriptScript runs when a mouse double-click
onmousedownscriptScript runs when mouse button is pressed
onmousemovescriptScript runs when mouse pointer moves
onmouseoutscriptScript runs when mouse pointer moves out of an element
onmouseoverscriptScript runs when mouse pointer moves over an element
onmouseupscriptScript runs when mouse button is released

 

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_events.htm