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

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 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.