๐ป Programming/Javascript
[Javascript / ์๋ฐ์คํฌ๋ฆฝํธ] ๊ฐ์ข #11 - Event Handling ( ์ด๋ฒคํธ ์ฒ๋ฆฌ )
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 ํ์ค ์ด๋ฒคํธ
์๋๋ ํ์ค ์ด๋ฒคํธ๋ค์ ๋ชฉ๋ก์ ๋๋ค. ์์์ ํด๋ณธ๊ฒ์ ๋ฐํ์ผ๋ก ์ด๋ฐ์ ๋ฐ ๊ธฐ๋ฅ๋์ ํ๋ฒ ํ ์คํธ ํด๋ณด์ธ์~~ ^___^
Event | Value | Description |
---|---|---|
onchange | script | Script runs when the element changes |
onsubmit | script | Script runs when the form is submitted |
onreset | script | Script runs when the form is reset |
onselect | script | Script runs when the element is selected |
onblur | script | Script runs when the element loses focus |
onfocus | script | Script runs when the element gets focus |
onkeydown | script | Script runs when key is pressed |
onkeypress | script | Script runs when key is pressed and released |
onkeyup | script | Script runs when key is released |
onclick | script | Script runs when a mouse click |
ondblclick | script | Script runs when a mouse double-click |
onmousedown | script | Script runs when mouse button is pressed |
onmousemove | script | Script runs when mouse pointer moves |
onmouseout | script | Script runs when mouse pointer moves out of an element |
onmouseover | script | Script runs when mouse pointer moves over an element |
onmouseup | script | Script runs when mouse button is released |
Reference : http://www.tutorialspoint.com/javascript/javascript_events.htm