4.9 JQUERY.DATA를 사용하여 DOM에 개체와 데이터 첨부하기

<label id="myLabel"></label>

<div id="myId"></div>

var node = document.getElementById('myId');

node.myObject = { label : document.getElementById('myLabel') }

이렇게 하면 가비지컬렉션이나 쪽 메모리 누수 등의 문제가 생길 수 있다.  그럴때 data()를 쓰는데, set, get 모두 가능하다.

$('#myId').data('myObject', $('#myLabel')); // setData

var x = $('#myId').data('myObject'); // getData

그리고 부가적으로 이벤트도 붙일 수 있다.

$('#myId')

.bind('setData', function(e, key, value){

alert('setData from '+ value.attr('id'));

})

.bind('getData', function(e, key){

alert('getData from '+ key);

});

이렇게 하면 모델뷰 분리에도 유리하다. 시계를 붙여보자

<div id="myTime"></div>

<script>

$(document).bind('setData', function(e, k, v){

if(k=='clock') $('#myTime').html(v.toString());

 });

setInterval(function(){ 

$(document).data('clock', new Date());

}, 1000);

</script>