'UnobtrusiveJS'에 해당되는 글 2건

  1. 2008.04.26 HTML5에서의 data-* 속성
  2. 2008.04.16 blur, focus 이벤트의 이벤트 위임

Simon Willison씨가 data- 속성을 통해 HTML 엘리먼트에 필요한 속성을 추가할 수 있는 방법으로 논의되는 HTML 5 스펙의 일부에 대해 글을 썼습니다.

예를 들어, 게임 상의의 우주선이라고 하면 이렇게 표현할 수 있습니다:

[code:Xml]
<div class="spaceship" data-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.id].fire()">
  Fire
 </button>
</div>

Simon 씨는  "이것은 설정값을 HTML 컨텐트로 저장할 장소가 마땅찮은 겸손한(unobtrusive) JavaScript에서 매우 유용하게 사용할 수 있습니다. 이는 또한 Dojo가 Dojo 위젯임을 표시하기 위해 커스텀 속성을 추가할 수 있는 승인된 방법을 가지게 됐다는 것을 의미합니다." 라는 사실을 지적했습니다.

from Embed your data- in HTML 5 on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from Event Delegation for blur and focus on Ajaxian

Quirksmode.org에서, Peter-Paul Koch 씨는 click 이벤트에서 멋지게 동작하는 이벤트 위임이 blur와 focus에서도 가능할지 조사하고 있습니다.

이벤트 위임이란 자식노드의 이벤트를 상위 노드의 부모들에게까지 보고하는 것을 의미합니다. 이벤트 핸들러를 각 엘리먼트에 적용하는 대신 하나의 부모 엘리먼트에만 적용하고 이벤트가 발생했다고 판단되는 이벤트 대상을 사용하면 됩니다. 이벤트 위임의 좋은 점은 노드의 갯수를 알 수 없는 경우라도 단 하나의 이벤트 핸들러를 사용할 수 있다는 것입니다. 데이터를 Ajax를 통해 받은 동적 메뉴같은 것을 개발할 때 무척 편리할 수 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요