셀렉터 표현식과 일치하는 엘리먼트나 앞으로 새로 만들 엘리먼트에 이벤트 핸들러 함수를 연결한다.
.live(eventType, handler)
.live(eventType, handler)
매개변수
◎ eventType : click, keydown 같은 자바스크립트 이벤트 타입 이름
◎ handler : 이벤트가 발생할 때 실행되는 이벤트 핸들러 함수
반환값
메서드 연쇄 호출을 지원하는 jQuery 객체
설명
.live() 메서드는 .bind() 메서드를 기초로 엘리먼트에 이벤트 핸들러 함수를 연결할 때 몇 가지 기능을 추가한 메서드다. .bind() 메서드는 메서드를 호출할 때 바로 이벤트 핸들러 함수를 연결한다. 하지만 그렇게 하면 엘리먼트를 문서 내에세 찾을 수 없는 AjAx환경이나 동적으로 만드는 엘리먼트에는 .bind() 메서드로 이벤트 핸들러 함수를 연결할 수 없다.
<body>
<div class="clickme">
click here
</div>
</body>
일반적으로 엘리먼트에 이벤트 핸들러 함수를 연결하는 방법은 다음과 같다.
$('.clickme').bine('click', function() {
$.print('Bound handler called.');
});
엘리먼트를 클릭하면 메시지가 출력된다. 하지만 나중에 다음과 같은 식으로 엘리먼트가 추가되면
$('body').append('<div class="clickme">Another targer</div>');
새로 추가된 엘리먼트도 .clickme라는 셀렉터에 해당하지만 .bine() 메서드를 호출한 뒤에 추가됐기 때문에 클릭해도 아무런 동작을 하지 않는다.
.live() 메서드는 동적으로 만드는 엘리먼트에도 이벤트 핸들러 함수를 연결할 수 있다.
.live() 메서드를 사용해서 대상 엘리먼트에 클릭 핸들러를 연결한다고 해보자.
$('.clickme').live('click', funtion() {
$.print('Live handler called.');
});
그런 다음 다음과 같이 새로운 엘리먼트를 추가한다.
$('body').append('<div class="clickme">Another target</div>');
그러면 새로 만든 엘리먼트를 클릭해도 이벤트 핸들러 함수가 실행된다.
이벤트 위임
.live() 메서드는 이벤트 위임을 활용해 아직 문서에 만들지 않은 DOM 엘리먼트를 대상으로 이벤트 핸들러가 실행되게 한다. 여기서 이벤트 위임이란 자손에게 발생한 이벤트를 처리할 책임을 지닌 상위 엘리먼트에 연결된 이벤트 핸들러를 말한다. .live() 메서드에 전달된 핸들러는 아직 엘리먼트가 존재하지 않으므로 실제로 엘리먼트에 연결되지 않는다. 대신, .live() 메서드는 특별한 핸들러를 DOM 트리상의 루트에 연결한다.
1. 클릭 이벤트 객체가 생성되어 이벤트 핸들링을 위해 <div>로 전달.
2. <div>에 직접적으로 아무런 이벤트 핸들러 함수가 연결돼 있지 않으므로 이벤트는 DOM트리상 상위 엘리먼트로 버블링.
3. 이벤트는 상위 엘리먼트로 차례차례 이동하면서 DOM트리상의 루트가지 전파된다. 이곳이 바로 .live()로 추가한 이벤트 핸드럴 함수가 항상 연결되는 곳이다.
4. .live() 메서드로 루트에 연결할 때 jQuery 자체에서 만든 임의의 특별한 click 이벤트 핸들러 함수가 실행된다.
5. 이 핸들러는 이벤트 객체의 target을 가지고 이벤트 처리를 계속해야 할지 판단한다. 이러한 판단은 $(event.target)의 반환값을 토대로 이뤄진다. 이때 closes('.clickme')를 실행하면 일치하는 엘리먼트를 찾을 수 있다.
6. 일치하는 엘리먼트를 찾으면 .live()로 연결한 이벤트 핸들러 함수를 실행.
경고
.live()로 이벤트 함수를 연결하는 방법은 매우 유용하지만 .bind() 메서드와 차이가 있으므로 완전히 동일하게 사용하기에는 문제가 있다.
- .live() 메서드는 자바스크립트에서 지원하는 모든 이벤트 타입을 지원하지는 않는다.
> click
> dblclick
> keydown
> keyup
> mousedown
> mousemove
> mouseout
> mouseover
> mouseup
> dblclick
> keydown
> keyup
> mousedown
> mousemove
> mouseout
> mouseover
> mouseup
- .live()를 사용하기에 앞서 DOM 탐색 메서드로 이벤트 핸들러 함수를 연결할 대상 엘리먼트를 검색하면 아직 존재하지 않는 엘리먼트를 검색할 때 정상적으로 작동하지 않을 수가 있으므로 가급적 셀렉터 표현식을 사용해 .live()의 대상을 지정.
- .live() 메서드로 연결한 핸들러 함수가 실행된 후 다른 핸들러가 실행되지 않게 하려면 반드시 핸들러 함수에서 false를 반환해야 한다. .stopPropagation()을 호출해서는 이렇게 할 수 없다.
- .live() 메서드로 연결한 핸들러 함수가 실행된 후 다른 핸들러가 실행되지 않게 하려면 반드시 핸들러 함수에서 false를 반환해야 한다. .stopPropagation()을 호출해서는 이렇게 할 수 없다.
'웹언어 > jQuery' 카테고리의 다른 글
| .attr() - 설정자 (0) | 2012.03.28 |
|---|---|
| .delegate() (0) | 2012.03.27 |
| 동적으로 엘리먼트를 생성할 때 이벤트 핸들러 (0) | 2012.03.21 |
| .text() - 설정자 (0) | 2012.03.20 |
| .append() (0) | 2012.03.20 |
