ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

jQuery Event(À̺¥Æ®¿¡ »ý¸íÀ»)
7³â Àü
live() ¸Þ¼­µåÀÇ °æ¿ì ¿ø·¡´Â jQueryÀÇ Ç÷¯±×ÀÎÀ¸·Î °³¹ßµÇ¾î »ç¿ëÀÌ µÇ¾úÀ¸³ª, ³Ê¹«³ª ÁÁÀº ±â´É ¶§¹®ÀÎÁö ¡°1.3¡± ÀÌÈÄ ¹öÀüÀÇ jQuery¿¡´Â ±âº» ±â´ÉÀ¸·Î Ãß°¡ µÇ¾ú½À´Ï´Ù. ´Ü¾îÀÇ ¶æÀ¸·Î´Â Á¤È®ÀÌ ¹«½¼ ¿ªÇÒÀ» ÇÏ´Â ¸Þ¼­µåÀÎÁö °¨ÀÌ ÀâÈ÷Áö ¾ÊÀ¸½Ã³ª¿ä? ½±°Ô ¸»¾¸ µå¸®¸é ÁöÁ¤ÇÑ °³Ã¼¿¡ À̺¥Æ®¶ó´Â »ý¸íÀ» ºÒ¾î ³Ö¾îÁØ´Ù°í »ý°¢ ÇÏ½Ã¸é µË´Ï´Ù.

¾ÆÁ÷µµ °¨ÀÌ ¿À½ÃÁö ¾ÊÀ¸½Ã³ª¿ä?

.click(), .bind() ¿Í °°Àº À̺¥Æ® ¸Þ¼­µå¿¡¼­´Â ÀÌ¹Ì ·Îµå°¡ ¿Ï·áµÈ °³Ã¼¿¡ À̺¥Æ®¸¦ ÁÖ¾ú´Ù¸é, .live() ¸Þ¼­µåÀÇ °æ¿ì µ¿ÀûÀ¸·Î »ý¼ºµÉ °³Ã¼³ª ¿ä¼Ò¿¡ ´ëÇؼ­µµ À̺¥Æ®¸¦ ¸ÊÇÎ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

$(¡°a¡±).click(function() { alert(¡®click a¡¯); }); ÀÇ °æ¿ì HTML ¹®¼­¿¡ Á¸ÀçÇÏ´Â ¡°a¡±¿ä¼Ò¸¦ ã¾Æ ¸¶¿ì½º Ŭ¸¯ À̺¥Æ®¸¦ ¸ÊÇÎ ÇÏ¿´À¸³ª, ÀÌÈÄ¿¡ µ¿ÀûÀ¸·Î Ãß°¡µÈ ¡°a¡± ¿ä¼Ò¿¡´Â ¿µÇâÀ» ÁÖÁö ¸øÇÕ´Ï´Ù. ÇÏÁö¸¸ $(¡°a¡±).live(¡®click¡¯, function() { alert(¡®live click a¡¯); });¸¦ »ç¿ë ÇÑ´Ù¸é óÀ½ ·Îµå µÈ ¿ä¼Ò´Â ¹°·Ð ·Îµå ÈÄ¿¡ µ¿ÀûÀ¸·Î »ý¼ºµÇ´Â ¡°a¡± ¿ä¼Ò¿¡ ´ëÇؼ­µµ µ¿ÀÏÇÑ À̺¥Æ®°¡ Àû¿ëµË´Ï´Ù.

¾Ñ ! ±¸¹®ÀÌ ¾îµð¼­ ¸¹ÀÌ º»°Å °°Áö ¾ÊÀ¸½Å°¡¿ä? ¹Ù·Î ÀÌÀü ½Ã°£¿¡ ¸»¾¸ µå¸° .bind() ¸Þ¼­µå¿Í ÀüüÀûÀÎ ±¸¹®ÀÌ ºñ½ÁÇÕ´Ï´Ù.
.bind() ¸Þ¼­µå¿¡¼­ °­Á¶ µå·È´ø ¿©·¯ À̺¥Æ®¸¦ Çѹø¿¡ µî·Ï ÇÏ´Â °Íµµ ¶È°°ÀÌ Àû¿ë °¡´ÉÇϸç, ¸Þ¼­µå¸í°ú ÇÏ´Â ¿ªÇÒ¸¸ Á¶±Ý ´Ù¸¦ »Ó ±¸¹®Àº µ¿ÀÏÇÏ´Ï »ç¿ë»óÀÇ ±¸¹®Àº »ý·«À» Çϵµ·Ï ÇÏ°Ú½À´Ï´Ù.

Á» ´õ ÀÚ¼¼ÇÑ ³»¿ëÀÌ ¾Ë°í ½ÍÀ¸½Ã´Ù¸é ÀÌÀü °­ÁÂÀÎ ¡°jQuery Event - bind()¡±¸¦ Âü°í ºÎŹ µå¸³´Ï´Ù.(Àý´ë·Î Èû¿¡ ºÎÄ¡°Å³ª, Áö³­ °­Á¸¦ ±¤°í ÇÏ·Á´Â ¸ñÀûÀÓÀ» ºÐ¸íÈ÷ ¹àÈü´Ï´Ù. Àú´Â »çȸ¿¡ Âîµé¾úÀ¸´Ï±î¿ä? Á˼ÛÇÕ´Ï´Ù.)

°£´ÜÇÑ ¿¹Á¦¸¦ ÅëÇØ .live() ¸Þ¼­µå¿¡ ´ëÇØ Á» ´õ ¾Ë¾Æ º¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').click(function () {
                $('ul').append('<li>list item Add(' + $('li').length + ')</li>');
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery ½ÃÀÛ Selector</h2>
    <p>jQuery¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀ» º¸·Á¸é jquery.com À» ¹æ¹®Çϼ¼¿ä.</p>
    <div>
        <ul>
            <li>list item 0</li>
        </ul>
        <input type="button" id="btnAdd" value="Add Element" />
    </div>
</body>
</html>


¹öÆ°À» Ŭ¸¯ÇÒ ¶§ ¸¶´Ù ¡°<li>¡±¿ä¼Ò°¡ Ãß°¡ µÇ´Â ³»¿ë ÀÔ´Ï´Ù. °á°ú È­¸éÀ» º¸¸é ¡°<li>¡± ¿ä¼Ò°¡ Ãß°¡µÇ´Â °Å ¿Ü¿¡´Â º°´Ù¸¥ ¿ªÇÒÀ» ÇÏ°í ÀÖÁö ¾Ê½À´Ï´Ù.


ÀÌÁ¦ live() ¸Þ¼­µå¸¦ ÅëÇØ À̺¥Æ®¸¦ Ãß°¡ ÇØ º¸µµ·Ï ÇÏ°Ú½À´Ï´Ù. µ¿ÀûÀ¸·Î »ý¼ºµÇ´Â ¡°<li>¡± ¿ä¼Ò¸¦ Ŭ¸¯ÇÒ °æ¿ì ÇØ´ç ¿ä¼ÒÀÇ text¸¦ °æ°í âÀ» ÅëÇØ º¸¿©ÁÖµµ·Ï ÇÏ¿´½À´Ï´Ù.
$('li').live('click', function () {
    alert($(this).text());
});

À§ ¿¹Á¦¸¦ ½ÇÇàÀ» ÇØ º¸½Ã¸é, µ¿ÀûÀ¸·Î Ãß°¡µÈ ¡°<li>¡± ¿ä¼Ò¿¡ ÀÚµ¿ÀûÀ¸·Î À̺¥Æ®°¡ Àû¿ë µÇ¾î ÀÖ´Â°É È®ÀÎ ÇÒ ¼ö ÀÖ½À´Ï´Ù.
ÀÌÁ¦´Â µ¿ÀûÀ¸·Î ±¸¼ºµÇ´Â ¿ä¼Ò¿¡ ÀÏÀÏÀÌ ÇϵåÄÚµù ÇÏÁö ¾Ê°í ¸î ÁÙÀÇ ÄÚµå·Î ±ò²ûÇÏ°Ô Ã³¸® ÇÒ ¼ö ÀÖ½À´Ï´Ù.

.die()

Á¶±ÝÀº ÀÜÀÎÇÑ À̾߱Ⱑ µÉÁö ¸ð¸£Áö¸¸ »ý¸íÀ» ÁÖ¾úÀ¸´Ï Á×ÀÏ ¼ö µµ ÀÖ½À´Ï´Ù.
±â²¯ »ì·Á³õÀº À̺¥Æ®¸¦ ¿Ö Á׿©¾ß ÇÏ´ÂÁö¿¡ ´ëÇØ ¾ÆÁÖ »ì¦ ÈùÆ®·Î ¸»¾¸À» µå¸®¸é, Ŭ¶óÀ̾ðÆ®¿¡¼­ µ¼ÀÇ º¯È­¸¦ °è¼Ó °¨ÁöÇϱ⠶§¹®¿¡ Ŭ¶óÀ̾ðÆ®¿¡ ºÎÇϸ¦ ÁÙ ¼ö ÀÖÀ¸¸ç, ¾î´À ¼ø°£ ÇØ´ç ±â´ÉÀÌ ÇÊ¿ä ¾ø¾îÁö´Â °æ¿ì ºÒÇÊ¿äÇÑ ºÎÇϸ¦ ¸·°Å³ª °è¼ÓµÇ´Â À̺¥Æ® ¸ÊÇÎÀ¸·Î ÀÎÇÑ ¿À·ù¸¦ ¹Ì¿¬¿¡ ¹æÁöÇϱâ À§ÇÔÀÔ´Ï´Ù.

¾Õ¼­ ¼³¸íÇÑ live() ¸Þ¼­µåÀÇ ¿¹Á¦¿¡ ÇØ´ç ¸Þ¼­µå¸¦ Ãß°¡ ÇÏ¿© ¾î¶»°Ô µ¿ÀÛÀ» ÇÏ´ÂÁö ¾Ë¾Æ º¸°Ú½À´Ï´Ù.
die() ¸Þ¼­µå¸¦ È£ÃâÇÒ ¹öÆ°°ú ¡°eventDie¡± ¸Þ¼­µå¸¦ À» Çϳª Ãß°¡ Çß½À´Ï´Ù.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').click(function () {
                $('ul').append('<li>list item Add(' + $('li').length + ')</li>');
            });

            $('li').live('click', function () {
                alert($(this).text());
            });

            $('#btnDie').click(eventDie);
        });

        function eventDie() {            
            $('li').die();
            //or $('li').die('click');
        }
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery ½ÃÀÛ Selector</h2>
    <p>jQuery¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀ» º¸·Á¸é jquery.com À» ¹æ¹®Çϼ¼¿ä.</p>
    <div>
        <ul>
            <li>list item 0</li>
        </ul>
        <input type="button" id="btnAdd" value="Add Element" /> <input type="button" id="btnDie" value="Event Die" />
    </div>
</body>
</html>


¡°Add Element¡±¸¦ ÅëÇØ ¿ä¼Ò¸¦ µ¿ÀûÀ¸·Î Ãß°¡ÇÏ°í ÇØ´ç ¿ä¼Ò¸¦ Ŭ¸¯½Ã¿¡ ÀÌÀü°ú µ¿ÀÏÇÏ°Ô µ¿ÀÛÀ» Çϳª ¡°Event Die¡± ¹öÆ°À» Ŭ¸¯ÇÏ½Ã¸é ´õ ÀÌ»ó °æ°í âÀÌ ¶ßÁö ¾Ê´Â °ÍÀ» È®ÀÎ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

$(¡®li¡¯).die() ÀÇ °æ¿ì´Â ¿ä¼Ò ¡°<li>¡±°ú ¿¬°áµÈ ¸ðµç À̺¥Æ®¸¦ »èÁ¦¸¦ Çϸç, $(¡®li¡¯).die(¡®click¡¯);À̶ó°í ÁöÁ¤ÇÒ °æ¿ì¿¡´Â ¡°<li>¡±¿ä¼Ò¿Í ¿¬°áµÈ ¡®click¡¯ À̺¥Æ®¸¸À» »èÁ¦ ÇÕ´Ï´Ù. ³Ê¹«³ª °£´ÜÇÏ°Ô À̺¥Æ®¸¦ Ãß°¡ÇÏ°í, »èÁ¦ÇÒ ¼ö ÀÖ´Ù´Ï ±×°Íµµ µ¿ÀûÀ¸·Î »ý¼ºµÇ´Â ¿ä¼Ò¿¡ Á¤¸» ¿Ï¼Ò ¾ÆÀÌÅÛ ¾Æ´Ï ¸Þ¼­µå°¡ ¾Æ´Ñ°¡ ½Í½À´Ï´Ù.

¹Ù·Î À̾ ¸¶Áö¸·À¸·Î ¼³¸íµå¸± ¸Þ¼­µå´Â ´õ¿í´õ 뽠µû½ºÆ½ÇÑ ±â´ÉÀ» ÇÏ´Â .one() ÀÔ´Ï´Ù.
À̸§¿¡¼­ ¹º°¡ ´À²¸ÁöÁö ¾ÊÀ¸½Ã³ª¿ä ? (jQuery¸¦ »ç¿ëÇÏ´Ù º¸¸é Á¤¸» ¸Þ¼­µå À̸§¸¸À¸·Î ´ë·«ÀÇ ±â´ÉÀ» ¾Ë¾Æ Â÷¸± ¼ö ÀÖ½À´Ï´Ù.)


.bind() ¸Þ¼­µå¿Í µ¿ÀÏÇÑ ¹æ½ÄÀ¸·Î À̺¥Æ®¸¦ Ãß°¡ÇÕ´Ï´Ù. ÇÏÁö¸¸ .one() ¸Þ¼­µå¸¦ ÅëÇØ Ãß°¡µÈ À̺¥Æ®´Â µü Çѹø¸¸ ½ÇÇàÀÌ µÇ°í »ç¶óÁö°Ô µË´Ï´Ù. Á¤¸» ÀÌ·± °ÍÀÌ jQuery¿¡¼­ Á¦°øÇÏ´Â ¸Þ¼­µåÀÇ È£Ã⸸À¸·Î Àû¿ë ÇÒ ¼ö ÀÖ´Ù´Ï~ Á¤¸» ¼¼»ó ÁÁ¾ÆÁ³½À´Ï´Ù.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('li').one('click', function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery ½ÃÀÛ Selector</h2>
    <p>jQuery¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀ» º¸·Á¸é jquery.com À» ¹æ¹®Çϼ¼¿ä.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>
</body>
</html>


¹Ù·Î ¾Õ¿¡ ÁøÇàÇÑ ¿¹Á¦¿Í ±âº» µ¿ÀÛÀº µ¿ÀÏÇÕ´Ï´Ù. ¡°<li>¡± ¿ä¼Ò¸¦ Ŭ¸¯Çϸé ÇØ´ç ³»¿ëÀ» °æ°í âÀ» ÅëÇؼ­ º¸¿©ÁÝ´Ï´Ù.
ÃßõÃßõ : 268 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
425
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
424
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
423
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
422
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
421
ºÎÆ®½ºÆ®·¦ CSS
420
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
419
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
418
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
417
[CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
416
CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
415
[JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
414
[HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
413
HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
412
ÅؽºÆ® ÁٹٲÞ, ±ÛÀÚÀÚ¸£±â CSS
411
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
410
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
409
[jQuery]¹öÆ° È°¼ºÈ­, ºñÈ°¼ºÈ­
408
jQuery show() / hide() / toggle() »ç¿ë¹ý
407
jquery ¿©·¯°¡Áö À̺¥Æ®
406
³×À̹ö ¿ÀÇÂAPI À½¼ºÇÕ¼º API »ç¿ëÇÏ´Â PHP »ùÇÃÄÚµå
405
[CSS] - Input clear `X ` ¹öÆ° Á¦°Å ( IE, Chrome, Firefox )
404
[Mobile] - ¸ð¹ÙÀÏÀ¥ Href ű׼Ӽºµé
403
jQuery ¿À¸¥ÂÊ ¿µ¿ªÀÇ ³ôÀ̸¦ ¿ÞÂÊ ¿µ¿ªÀÇ ³ôÀÌ¿Í µ¿ÀÏÇÏ°Ô Çϱâ
402
jquery¿¡¼­ Å×ÀÌºí¿¡ ¸¶¿ì½º ¿À¹ö½Ã ÇØ´ç ÇàÀÇ ¹è°æ»ö»ó º¯°æÇϱâ
401
jquery ½ºÅ©¸³Æ®³» ƯÁ¤°ª È®ÀÎÇϱâ (µð¹ö±ë)
400
jquery cookie (jquery.cookie.js)
399
jquery ´Ù¸¥¹öÀü Ãß°¡ »ç¿ë½Ã Ãæµ¹ ¹æÁö (Ä«Æä24 ½º¸¶Æ®µðÀÚÀÎ ±âº»³»Àå jquery 1.4.4 ¹öÀü°ú Ãæµ¹½Ã ÇØ°á¹æ¹ý)
398
[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
397
javascript audioÆÄÀÏ Àç»ý
396
[jQuery.$ajax]mysql + php ¼­¹ö¿¡¼­ json µ¥ÀÌÅÍ ¾ò¾î¿À±â
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.