jQuery Event - 이벤트에 생명을~

jinmuk

· 12년 전 · 조회 2330 2330 · 댓글 3 3

첫 번째로 알아 볼 메서드는 이벤트에 생명을 주는 live() 입니다.

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>” 요소를 클릭하면 해당 내용을 경고 창을 통해서 보여줍니다. 설명을 드린 내용과 동일하게 동작을 하는지 확인을 해 보도록 하겠습니다.

역시 이미지로는 동작하는 모습을 보여드리기가 힘드네요…. 정말로 설명한 데로 동작을 하니 꼭 소스를 실행해 보시기 바랍니다. (뻥치는거 절대 아닙니다. 그래도 의심이 가신다면 혹은 예제 실행이 귀찮으시다면 http://api.jquery.com/one/ 를 확인을 부탁 드립니다.)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

takumi22

프로필 보기 이 회원 글보기

12년 전

감사합니다~~~

천성구

프로필 보기 이 회원 글보기

12년 전

감사합니다~

알찬돌삐

프로필 보기 이 회원 글보기

12년 전

live 메쏘드는 deprecate된걸로 알고있어용

게시글 목록

번호	제목	글쓴이	조회	날짜
26573	기타 매뉴얼, 북 등의 문서 협업 / 디자인 목업	wooriteam	4,911	10년 전
7309	반응형웹 기반 쇼핑몰 구축 (영카트 vs Cafe24 vs 고도몰) 2	큐티써니	1,742	10년 전
19780	기타 vi 편집기에서 세로로 문자열 입력	멋진남자임	1,112	10년 전
7306	파일 업로드 권한에 관련되서 질문드립니다.. 2	sdflksdj2	769	10년 전
28025	크로스 브라우징 하시는분들 익스 7까지 잡아주시나요? 10	갱쿤	1,315	10년 전
28020	안드로이드 모바일에서 이미지가 흐릿하게 보이는 현상은? 4	벤지	1,344	10년 전
28010	취업과정 고민 및 포트폴리오 질문드려요 9	바이올린	1,008	10년 전
7304	직접 만든 레이아웃이나 플러그인 등에 애드센스를 달아서 배포한다면 약관 위반이 되는걸까요? 1	SeungYeon	525	11년 전
7302	값 넘겨주기 input 이렇게 쓰는게 맞을까요? 1	에니스	766	11년 전
7295	그누보드에서 phpmyadmin만 재설치가 가능한가요?? 6	sdflksdj2	641	11년 전
7292	파이썬 관련 질문입니다. 2	허재영	923	11년 전
7287	이번에 만들어본 푸시 클래스 입니다. 4	Terrorboy	1,349	11년 전
19779	기타 세로로 편집하기 - 꼭 필요한 기능	멋진남자임	1,370	11년 전
7284	Y a n d e x B o t ..... 비밀번호 쪽으로 1주일째 2	벤지	560	11년 전
7279	php 서버 :: 리눅스 서버 or 윈도우 서버?? 4	senseme	1,178	11년 전
7278	<개발자 모십니다> 뉴스젤리 개발자 채용 공고	뉴스젤리	929	11년 전
28009	다음 API 주소 적용된 영카트5 이동중인데...	ImSG	681	11년 전
31753	그누보드5 그누보드5 강좌 - 갤러리스킨 만들기	신리	4,805	11년 전
31752	그누보드5 그누보드5 강좌 - 메인에 jQuery슬라이드 적용하기	신리	4,384	11년 전
7274	게시물이동관련 질문입니다. 3	holla	859	11년 전
31751	그누보드5 그누보드5 강좌 - 주메뉴,부메뉴 모두 가로형태 메뉴적용하기	신리	4,208	11년 전
31750	그누보드5 그누보드5 강좌 - 네비게이션적용하기	신리	3,886	11년 전
31749	그누보드5 그누보드5 강좌 - 네비게이션적용하기	신리	4,236	11년 전
31748	그누보드5 그누보드5 강좌 - 스킨적용하기	신리	5,015	11년 전
30979	기타 계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임	뽁스	4,688	11년 전
31747	그누보드5 그누보드5 강좌 - 홈페이지만들기 실전#2	신리	4,245	11년 전
28004	정말 궁금한데요... 4	감기약	717	11년 전
31745	그누보드5 그누보드5 강좌 - 홈페이지만들기 실전 1	신리	5,634	11년 전
7267	그누보드나 배추빌더 설치시 아래와같이 오류가 납니다 6	까망아이	1,448	11년 전
7261	payment 플러그인 화 5	Terrorboy	936	11년 전
31742	그누보드5 그누보드강좌 샘플 2	신리	2,946	11년 전
7256	이클립스 이용 하시는분께 4	멋진남자임	872	11년 전
19776	node.js mysql 연결 방법 2가지 2	파랑새1597	2,613	11년 전
24650	상담좀 부탁드립니다~ 7	유보	2,224	11년 전
7252	저 그누보드는 설치되어 있는데 소스수정은??? 3	basketball	1,313	11년 전
7248	이메일서버가 수신은 되는데 발송이 안될때 해결법이 무얼까요 3	까망아이	1,555	11년 전
28002	인풋폼 크로스브라우징 문제 대응법 문의요 1	김우너석	886	11년 전
19772	JavaScript 한글로 된 숫자를 아라비아 숫자로 변환 3	슈와이	2,024	11년 전
7245	개발자토크는 역시 제가 낄 곳이 아니군요. 2	바보천사	807	11년 전
19770	jQuery jquery.bxSlide를 이용하여 슬라이드만들기 1	잘살아보자	5,310	11년 전
19769	jQuery php에 number_format을 제이쿼리로.. 별것 다 있네요 굿이에요	잘살아보자	2,175	11년 전
30975	CSS 익스8이하에서 css3을 사용하기 3	잘살아보자	3,287	11년 전
7243	OOP에 대한 생각 1	파랑새1597	888	11년 전
7236	고정 아이피가 바뀌면서 서버 먹통 관련 문의 드립니다 6	까망아이	1,063	11년 전
28001	터치슬라이드안에 탭이 들어갈떄 질문입니다..	프리랜서퍼블리셔	937	11년 전
27994	h1 태그를 많이 써도 SEO에 영향이 없을까? 6	모노폴리	1,544	11년 전
7233	구글 앱 등록해보신분~!! 검색 순위 궁금한게 있어요! 2	울라라라우	862	11년 전
7232	부트스트랩 기반 위지웍 에디터.	위토즈	1,509	11년 전
19768	jQuery 제이쿼리로 이미지 회전 시키기	잘살아보자	4,194	11년 전
19765	jQuery 구형 익스에서 HTML5 적용시키기 2	잘살아보자	1,956	11년 전
19763	jQuery 특정 레이어 높이 100% 잡는 법 1	잘살아보자	1,910	11년 전
30974	CSS 레이어팝업 가로 중앙 위치 시키기	잘살아보자	5,869	11년 전
7224	Socket.IO도 결국은 리프레쉬?? 7	senseme	1,835	11년 전
19761	jQuery 모바일 해상도에 맞게 이미지 출력 1	잘살아보자	2,703	11년 전
24645	2014년 9월 SIR 접속 브라우저 해상도 순위 4	관리자	2,346	11년 전
19760	기타 perl을 사용하여 쉘상에서 url 주소 실행	잘살아보자	1,007	11년 전
19758	jQuery 제이쿼리를 이용하여 동영상 재생 1	잘살아보자	3,106	11년 전
19757	jQuery jquery.ulslide.js 2번째 , 마우스훨을 이용한 이미지 이동	잘살아보자	2,446	11년 전
19754	jQuery 제이쿼리 가로 슬라이드 [jquery.ulslide.js 사용법] 2	잘살아보자	5,806	11년 전
19753	jQuery 브라우저 상단에 고정 시키는 제이쿼리 소스	잘살아보자	3,431	11년 전
19752	PHP php에서 배열에 담긴 값을 중복제거 하기	잘살아보자	1,880	11년 전
19751	PHP php 에러 출력하기	잘살아보자	2,136	11년 전
7223	테스트중입니다....	ksdhtm56	515	11년 전
7216	<? 와 <?php 의 차이가 뭔가요,, 6	뻘범	1,383	11년 전
7213	여러개정에서 한개의 DB 공유해서 사용 문의 2	꼴랑2	895	11년 전
31741	AngularJS AngularJS 강좌 9. HTML DOM	신리	3,498	11년 전
19750	jQuery 1원팁] css에 hover효과를 제이쿼리로	잘살아보자	1,347	11년 전
19749	JavaScript 1원팁]알고 있음 좋은 자바스크립트 함수	잘살아보자	1,306	11년 전
19748	jQuery 제이쿼리 기본 효과 메소드	잘살아보자	1,452	11년 전
31740	AngularJS AngularJS 강좌 8. SQL	신리	3,558	11년 전
31739	AngularJS AngularJS 강좌 7. Tables	신리	3,523	11년 전
31738	AngularJS AngularJS 강좌 6. XMLHttpRequest	신리	3,342	11년 전
7208	mariaDB -> mysql로 DB 자료 이전이 안되네요 (2편-아직도 안되요) 4	멋진남자임	985	11년 전
31737	AngularJS AngularJS 강좌 5. Filters	신리	3,373	11년 전
30967	기타 ie8에 font awesome 적용 방법 6	지운아빠	2,570	11년 전
31736	AngularJS AngularJS 강좌 4. Controllers	신리	3,141	11년 전
7205	안녕하세요, 데이터베이스 관련 질문이에요.. 2	파랑새1597	617	11년 전
30965	HTML 팁]모바일에서 전화 걸기 1	잘살아보자	2,392	11년 전
30963	기타 파비콘 넣는 방법이에요. 1	잘살아보자	2,374	11년 전
19747	기타 익스플로러에서 구글 크롬 프레임 작동하기	잘살아보자	2,454	11년 전
19746	기타 viewport 사용	잘살아보자	1,426	11년 전
19745	기타 익스플로러9 이하 브라우저에서 CSS3 속성(radius, shadow) 사용하기	잘살아보자	1,907	11년 전
19744	기타 html5 구조를 만들기 위해 사용하는 태그	잘살아보자	1,226	11년 전
19742	기타 구형 익스플로러에서 html5 구조 사용하기 1	잘살아보자	1,040	11년 전
7193	mariaDB -> mysql로 DB 자료 이전이 안되네요 11	멋진남자임	1,612	11년 전
7191	input 태그에서 자동완성 될때 키보드로 이동은 어떤 기능인가요? 1	유닛룽	942	11년 전
31735	AngularJS AngularJS 강좌 3. Directives	신리	3,829	11년 전
19741	jQuery 무한 스크롤 (이미지 갤러리용)	굿어스	3,601	11년 전
19740	PHP [알고리즘] 하노이의 탑	슈와이	1,224	11년 전
19739	PHP 범위사이에서 중복없이 랜덤(random)으로 뽑기	슈와이	2,470	11년 전
7188	js 파일 소스 질문이요~~~~ 2	오드리15	887	11년 전
27986	제이쿼리 플러그인 및 제이쿼리소스 7	래비두라	1,696	11년 전
31734	AngularJS AngularJS 강좌 2. Expressions	신리	3,301	11년 전
31733	AngularJS AngularJS 강좌 1. Introduction	신리	3,600	11년 전
31732	AngularJS AngularJS 강좌 0. Home	신리	4,529	11년 전
7186	메인 페이지에서 보이던 베너가... 1	토굴지기	928	11년 전
19738	PHP [알고리즘] 이중연결리스트를 이용한 큐(queue)	슈와이	1,496	11년 전
19736	JavaScript [알고리즘] 스택(stack)을 이용한 간단 계산기 1	슈와이	2,898	11년 전
7180	카톡로그인 ㅠ.ㅠ; 5	Terrorboy	1,064	11년 전
7165	어떻게 하면 함께 할 개발자 분을 모실 수 있을까요?(고견부탁드려요) 14	KeePin뽁이	1,052	11년 전

이전 다음

7 8 9 10 11

전체 목록