Mouse Event


Home > Document > CSS > Introduction > Mouse event

ÆäÀÌÁö ¸ñÂ÷



1. CSS ¸¦ ÀÌ¿ëÇÑ DHTML

Windows µî GUI(Grapic User Interface) ȯ°æ¿¡¼­´Â »ç½Ç»ó Mouse ¾øÀÌ ÄÄÇ»Å͸¦ ÇÑ´Ù´Â °ÍÀº ºÒ°¡´É¿¡ °¡±î¿î ÀÏÀÔ´Ï´Ù. ±×·¯´Ù º¸´Ï Ãʺ¸ÀÚ¶óµµ Mouse ÀÛµ¿¿¡´Â Å« ¾î·Á¿òÀÌ ¾ø´Â°ÅÁÒ. ÈçÈ÷ Ãʺ¸ÀÚÀÇ °æ¿ì ÁÖ·Î ¿ÞÂÊ ¹öư¸¸À» »ç¿ëÇÏ°Ô µÇÁÒ. ÀÌ ¿ÞÂÊ ¹öưÀº Click ÀÇ ±â´É ¹Û¿¡ ¾ø½À´Ï´Ù. ÇÏÁö¸¸ »ç½Ç»ó Windows ³ª Windows ÀÀ¿ë ÇÁ·Î±×·¥µéÀº ¿À¸¥ÂÊ ¹öư¿¡ ¸¹Àº ±â´ÉÀ» ¼û°Ü ³õ¾Ò½À´Ï´Ù. ¿¹¸¦ µé¾î ¿ìŬ¸¯ ÇßÀ» ¶§ ¾î¶² ¸Þ´º°¡ ³ªÅ¸³­´ÙµçÁö ÇÏ´Â ½ÄÀ¸·Î ¸»ÀÌÁ®... À¥ ¹®¼­¿¡¼­µµ ±×·¸°í ÀÀ¿ë ÇÁ·Î±×·¥¿¡¼­µµ °¡Àå °í¹Î½º·¯¿î °ÍÀÌ ¸Þ´ºÀÇ Ã³¸®Àε¥, ±×°Ç ¸ð´ÏÅÍÀÇ Å©±â¶ó´Â °ÍÀÌ ÇÑÁ¤µÇ¾î Àֱ⠶§¹®ÀÔ´Ï´Ù. ¸Þ´º ºÎºÐ¿¡ ³Ê¹« Å« ¸éÀûÀ» ÇÒ¾ÖÇÏ´Ù º¸¸é ÀÛ¾÷°ø°£Àº ´ç¿¬È÷ ÁÙ¾î µé°Ô µÇ°ÚÁÒ. ±×·¯´Ù º¸´Ï ¸¶¿ì½º ¿À¸¥ÂÊ ¹öư¿¡ ¾î¶² ±â´ÉÀ» ºÎ¿©ÇÏ°í ¿ìŬ¸¯ÇÏ´Â µ¿ÀÛ¿¡¼­ ³ªÅ¸³ª°Ô ¸¸µç°Å¶ó´Â ¸»ÀÔ´Ï´Ù. ¶Ç °°Àº ÇÁ·Î±×·¥ÀÌ¶óµµ ¾î´À À§Ä¡¿¡¼­ ¿ìŬ¸¯ÇÏ´À³Ä¿¡ µû¶ó ³ªÅ¸³ª´Â ¸Þ´º°¡ ´Ù¸¦ ¼ö ÀÖ±¸¿ä. ¿©·¯ºÐµéÀÌ Ãʺ¸ÀÚ¶ó¸é ¿©±â Àú±â¼­ ¿ìŬ¸¯À» ÇÑ ¹ø¾¿ ÇØ º¸´Â °Íµµ ±× ÇÁ·Î±×·¥À» Àß ÀÍÈú ¼ö ÀÖ´Â ÁÁÀº ¹æ¹ýÀÔ´Ï´Ù.

À̹ø ÆäÀÌÁö¿¡¼­´Â ÀÌ·± ¸¶¿ì½ºÀÇ µ¿ÀÛÀ» ÀÌ¿ëÇÏ¿© Mouse¸¦ ¿òÁ÷À̰ųª Ŭ¸¯À» ÇÏ´Â µîÀÇ ¾î¶² »óȲ(Event)ÀÌ ¹ß»ýÇßÀ» ¶§ Ç¥ÇöÇÒ ¼ö ÀÖ´Â ÀÏÁ¾ÀÇ DHTML ¿¡ ÇØ´çµÇ´Â ¸î °¡Áö ½ÇÇèÀ» ÇØ º¸µµ·Ï ÇϰڽÀ´Ï´Ù. ¿ì¼± ¾Æ·¡ÀÇ Ç¥¸¦ º¸°í ¸¶¿ì½ºÀÇ µ¿ÀÛÀÌ ¾î¶»°Ô ±¸ºÐµÇ¸ç ±× µ¿ÀÛ¿¡ µû¶ó ÀϾ´Â Event¸¦ ¾î¶»°Ô ºÎ¸£´ÂÁö Àß º¸½ÃÁ®... ¾Æ·¡ÀÇ Ç¥¿¡ '¿µ¿ª' À̶ó´Â ´Ü¾î°¡ ³ª¿À´Âµ¥, ÀÌ ¿µ¿ªÀ̶õ Block-Level Element ¸¦ ÀǹÌÇÕ´Ï´Ù. Áï, ºê¶ó¿ìÀú â¿¡ ³ªÅ¸³ª´Â Element µéÀ» ÀǹÌÇÕ´Ï´Ù. Âü°í·Î HTML 4.0ÀÇ Block-Level Element ´Â ´ÙÀ½°ú °°½À´Ï´Ù.

Block-Level Elements
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, COL, COLGROUP, TD, TH, CAPTION


MouseÀÇ µ¿ÀÛ¿¡ µû¸¥ EventÀÇ ±¸ºÐ
onMouseOver ¸¶¿ì½º°¡ ÁöÁ¤µÈ ¿µ¿ª¾ÈÀ¸·Î µé¾î°¡´Â ¼ø°£
onMouseOut ¸¶¿ì½º°¡ ÁöÁ¤µÈ ¿µ¿ª¾È¿¡¼­ ºüÁ® ³ª¿À´Â ¼ø°£
onMouseDown ¸¶¿ì½º ¹öưÀ» ´©¸£´Â ¼ø°£(¿ÞÂÊÀ̳ª ¿À¸¥ÂÊ ¸ðµÎ)
onMouseUp ¸¶¿ì½º ¹öưÀ» ´©¸¥ »óÅ¿¡¼­ ¹öưÀ» ³õ´Â ¼ø°£(¿ÞÂÊÀ̳ª ¿À¸¥ÂÊ ¸ðµÎ)
onMouseMove ¸¶¿ì½º°¡ ¿µ¿ª¿¡¼­ ¿òÁ÷À̱⠽ÃÀÛÇÏ´Â ¼ø°£
onClick mousedown + mouseup Áï ´­·¶´Ù ³õ´Â ¼ø°£
onDblClick onClick À» ¿¬´Þ¾Æ µÎ ¹ø ÇÏ´Â ¼ø°£




2. DHTML À» Çϱâ À§ÇÑ »çÀü Áö½Äµé


DOM(Document Object Model)

DOM ÀÇ ¸ñÀûÀº °¢°¢ÀÇ HTML Element µéÀ» Object È­ ÇÏ¹Ç·Î ÇØ¼­ µ¿Àû(Dynamic)ÀÎ È¿°ú¸¦ ³¾ ¼ö ÀÖ´Â ¹æ¹ýÀ» Á¦½ÃÇϱâ À§Çؼ­ Á¦¾È µÈ ¹°°ÇÀε¥, ±âÁ¸ÀÇ À¥ ÆäÀÌÁö ÀÛ¼ºÀÚ µéÀÌ º¸´Ù ½¬¿î ¹æ¹ýÀ¸·Î DHTML À̳ª JavaScript Á¢±ÙÇÏ°Ô ÇØ ÁÝ´Ï´Ù. ¿©±â¼­ Object ¶õ »çÀüÀû Àǹ̷Π¹°Ã¼ °´Ã¼ µîÀÇ ÀǹÌÀÎÅ× ¾î¶»°Ô ÇØ¼®Çصµ »ó°ü ¾ø½À´Ï´Ù. ¾î¶»°Ô ÇØ¼®Ç졂 DOM ¿¡¼­ÀÇ Object ¶õ HTML Element¸¦ »ç¿ëÇÑ TagÀ» ÀǹÌÇÕ´Ï´Ù.

°¡¸¸È÷ ÇÔ »ý°¢ÇØ º¾½Ã´Ù. µ¿ÀûÀ̶ó´Â °ÍÀº ¿òÁ÷Àδٴ °ÍÀε¥, ¿ì¸®°¡ ÁÖº¯¿¡ ÀÖ´Â ¹°°ÇÀ» ¿òÁ÷ÀÌ·Á¸é ±×°É ¼ÕÀ¸·Î Àâ°í ¿òÁ÷ÀÌ°Ô µÇÁ®. ±×·³ »ç¶÷À» ¿òÁ÷Àδٰí Ä¡¸é ù ¹øÂ° »ý°¢ÇØ º¼ ¼ö ÀÖ´Â ¹æ¹ýÀÌ °¡¸¶´Ï ÀÖ´Â »ç¶÷À» °­Á¦·Î µéÃÄ ¾þµçÁö ÇØ¼­ ¿òÁ÷ÀÌ´Â ¹æ¹ýÀε¥, »ó´ë¹æÀÌ ¾îµð ±×·¸°Ô °¡¸¶´Ï ÀÖ°Ú½À´Ï±î? ¹ÝÇ×ÇϰÚÁ®? ³ª º¸´Ù Èû¼¾ »ç¶÷ÀÌ¸é µÇ·Á ¶Ñµð·Á ¸Â½À´Ï´Ù. º°·Î ÁÁÀº »ý°¢ÀÌ ¾Æ´Ñ °Í °°Àº´Ï Á¢¾îµÎ°í... ÀÌ ¹ø¿¡´Â ³ª(this)¸¦ Æ÷ÇÔÇØ¼­ ¼­·Î óÀ½ ¸¸³ª´Â ¿©·¯ »ç¶÷(Object)ÀÌ Àִµ¥, ³»°¡ »ó´ë¹æ Áß¿¡ ¾Æ¹«³ª ºÎ¸£¸é ±× »ç¶÷ÀÌ ¿òÁ÷À̰í, ³ªµµ »ó´ë¹æÀÌ ºÎ¸£¸é ¿òÁ÷À̱â·Î ¾à¼ÓÀ» Çß´Ù°í °¡Á¤ÇÏÁ®. ±×·¯±â À§Çؼ­´Â ¿ì¼± ÇÊ¿äÇÑ°Ô ¸Ö±î¿ä?... ±×°Ç ±× »ç¶÷ÀÇ À̸§ ÀÔ´Ï´Ù. À̸§À» ¾Ë¾Æ¾ß ºÎ¸£Áö ¾Ê°Ú½À´Ï±î. ±×·³ À̸§ À̶ó´Â °Í¿¡ ´ëÇØ ¾Ë¾Æ º¸°Ú½À´Ï´Ù.


this

HTML Tag ÀÚ½ÅÀ» ¸»ÇÕ´Ï´Ù. Áï ÀڱⰡ Àڱ⠽º½º·Î ¿òÁ÷ÀÏ ¶§´Â ÀÌ this °¡ À̸§ÀÌ µË´Ï´Ù.


name

HTML Element ÀÇ Attribute Áß¿¡ Çϳª·Î ¸ðµç Element µéÀÌ ´Ù name ¼Ó¼ºÀ» °¡Áö°í ÀÖÁö´Â ¾Ê°í, Form ¿¡ »ç¿ëµÇ´Â ¸ðµç Element, iframe, frame, IMG, MAP µîÀÇ Element °¡ °¡Áö°í ÀÖ´Â ¼Ó¼ºÀ¸·Î¼­ Scripting ¿¡¼­ È£ÃâµÉ À̸§ÀÔ´Ï´Ù.


id

id ´Â name ¼Ó¼ºÀÌ ¾ø´Â HTML Element ¿¡¼­ Scripting ÇÒ ¶§ È£ÃâµÉ À̸§ÀÔ´Ï´Ù.


className

»ç¿ëÀÚ°¡ Style class¸¦ ÁöÁ¤ÇÒ ¶§ ºÙ¿©ÁØ Name ÀÔ´Ï´Ù. ÀÌ ¶§ classNameÀÇ 'N' Àº ¹Ýµå½Ã ´ë¹®ÀÚ À̾î¾ß µË´Ï´Ù.

this¸¦ Á¦¿ÜÇÑ À§ÀÇ ¾î¶² ¹æ¹ýÀ̵çÁö HTML Tag¿¡ À̸§ÀÌ ºÙ¿©Áö°Ô µÇ¸é ±× ¶§ ºÎÅÍ ±× TagÀº DHTML ·Î Scripting ÇÏ¿© ¿òÁ÷ÀÏ ¼ö ÀÖ´Â Object °¡ µË´Ï´Ù. ±× Àü¿¡µµ ¹°·Ð Object ¿´Áö¸¸ Àڱ⠽º½º·Î¸¸ ¿òÁ÷ÀÏ ¼ö ÀÖ¾ú°í ´Ù¸¥ ¹æ¹ýÀ¸·Î´Â ¿òÁ÷ÀÏ ¼ö ¾ø´Â Object ¿´½À´Ï´Ù.



3. CSS ScriptingÀ» ÀÌ¿ëÇÑ DHTML

CSS Scripting À̶õ ¾ÕÀÇ DOM¿¡¼­ ¼³¸íÇÑ °Í ó·³ HTML Tag À» ObjectÈ­ ÇÏ¿© Dynamic ÇÑ HTML À» ¸¸µå´Â ¹æ¹ýÀ» ¸»ÇÕ´Ï´Ù. ÈçÈ÷ DHTML À̶ó ±×·¯¸é °í¼öµéÀ̳ª ¾µ ¼ö ÀÖ´Â ¹°°ÇÀ¸·Î ¿ÀÇØÇϰí Àִµ¥, ¾Ë°íº¸¸é ¾ÆÁÖ °£´ÜÇÑ ¹°°ÇÀÌ ¹Ù·Î DHTML ÀÔ´Ï´Ù. ¾Æ¸¶ ¿©·¯ºÐµéµµ ¾Ë°í ³ª¸é '¾Ö°Ô ÀÌ·¸°Ô ½¬¿ö?' ¶ó´Â »ý°¢ÀÌ µé¸®¶ó ¹Ï½À´Ï´Ù. ¾Æ·¡´Â CSS ScriptingÀÇ ±âº» °ø½ÄÀÔ´Ï´Ù.

ÀÔ·Â
object.style.styleProperty = styleValue

Á¤¸» °£´ÜÇÏÁö ¾Ê½À´Ï±î? object´Â this ¶Ç´Â name À̳ª id ¸¦ ºÙÀÎ HTML Tag À» ¸»Çϰí, styleÀº CSS Scripting À̶ó´Â ¶æÀ¸·Î ºÙ¿©ÁÖ´Â ½Äº°ÀÚ(Identifier)À̰í, styleProperty´Â Style property Áß Çϳª, styleValue´Â ¼±ÅÃµÈ styleProperty ÀÇ °ªÀ» ÀǹÌÇÕ´Ï´Ù. ¿¹¸¦ µé¾î Mouse°¡ ¾î¶² TagÀ¸·Î ¿Ã¶ó °¬À» ¶§ ¼±ÅÃÇÑ Tag ÀÚüÀÇ ±ÛÀÚ»öÀ» ±âº»»öÀÎ °ËÁ¤»ö¿¡¼­ red color·Î ¹Ù²Ù°í ½Í´Ù¸é scriptingÀº ´ÙÀ½°ú °°½À´Ï´Ù.

ÀÔ·Â
onMouseOver="this.style.color = 'red' "

ÀÌ»óÀ¸·Î °£´ÜÇÏ°Ô Mouse event¿Í DOM ±×¸®°í CSS Scripting¿¡ ´ëÇØ ¾Ë¾Æ º¸¾Ò°í ÀÚ¼¼ÇÑ ³»¿ëÀº Style property µéÀ» ¹è¿ì¸é¼­ ¿¹Á¦¸¦ ÅëÇØ ÀÍÇô ³ª°¡µµ·Ï ÇϰڽÀ´Ï´Ù.




ÀÌ ¹®¼­ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.

Top
Back
New
°Ë»ö