홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)

온라이브스토어(앱다운로드)
온라이브(방송등록및청취)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
jQuery Event(이벤트에 생명을)
2년 전
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>” 요소를 클릭하면 해당 내용을 경고 창을 통해서 보여줍니다.
추천추천 : 136 추천 목록
번호 제목
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
2,981
 jquery cookie (jquery.cookie.js)
목록
인기절정뽕짝파티
트로트재생목록
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.