- .live()
- .live( eventType, handler )
- .live( eventType, eventData, handler )
- .live( events )
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” 요소에 대해서도 동일한 이벤트가 적용됩니다.
- .die()
- .die( eventType, [handler] )
- .die( eventTypes )
조금은 잔인한 이야기가 될지 모르지만 생명을 주었으니 죽일 수 도 있습니다. 기껏 살려놓은 이벤트를 왜 죽여야 하는지에 대해 아주 살짝 힌트로 말씀을 드리면, 클라이언트에서 돔의 변화를 계속 감지하기 때문에 클라이언트에 부하를 줄 수 있으며, 어느 순간 해당 기능이 필요 없어지는 경우 불필요한 부하를 막거나 계속되는 이벤트 맵핑으로 인한 오류를 미연에 방지하기 위함입니다.
<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'라는 버튼을 누르면 .live()를 이용한 클릭 이벤트가 있는 li가 생성이 되고, 그 이벤트를 죽일 수 있는 'Event Die' 버튼을 누르면 li의 클릭이벤트가 사라지는 것을 볼 수 있습니다.
- .one()
- .one( eventType, [eventData], handler(eventObject) )
.bind() 메서드와 동일한 방식으로 이벤트를 추가합니다. 하지만 .one() 메서드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라지게 됩니다.
<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>
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ jquery 기초 ] jquery ajax (0) | 2019.10.13 |
|---|---|
| [ jquery 기초 ] jquery Animation - 애니메이션 (0) | 2019.10.12 |
| [ jquery 기초 ] jquery Event - bind() 메서드 (0) | 2019.10.10 |
| [ jquery 기초 ] jquery Event - 이벤트 지원 메서드 (0) | 2019.10.09 |
| [ jquery 기초 ] jquery FORM API - 폼을 위한 API (0) | 2019.10.08 |
