엘레먼트 요소에서 data 를 이벤트 핸들러로 사용하기

1. html5 부터는 id 나 class 처럼 data 속성을 사용할 수 있습니다.

data 속성은 data-my = "어쩌구저쩌구" 로 사용하고 이를 호출할 때는 dataset.my 로 호출합니다.

위에서 my 는 본인이 임의적으로 주는 것이구요.

----------

2. 예제를 하나 들어 보갰습니다.

http://www.mediaplayer.kr/main/bbs/html_editor.php

위 에디터에서 직접 확인해 보세요.

각 div 에 클래스를 주고 클래스를 물고 늘어져서 개별 버튼 클릭시 모두 검은 텍스트가 되고 본인만 빨간 텍스트가 되는 코드입니다.

<style>
.aa { width:300px; font-weight:bold; cursor:pointer; padding:10px; text-align:center; border:1px solid #cccccc; margin:0 auto; margin-bottom:5px; }
</style>

<div class="aa">하나</div>
<div class="aa">두울</div>
<div class="aa">세엣</div>
<div class="aa">네엣</div>
<div class="aa">다섯</div>
<div class="aa">여섯</div>

<script>
classAa = document.getElementsByClassName("aa");
for (aa of classAa) {
    aa.onclick = function() {
        for (aa of classAa) aa.style.color = "black";
        this.style.color = "red";
    }
}
classAa[0].onclick();
</script>

----------

그런데 처음 3개는 빨간색으로 나머지 3개는 파란색으로 바꾸고 싶습니다.

그렇다면 클래스를 하나 더 만들거나 개별 div 마다 아이디를 주어서 핸들링을 해야 할까요?

이 때에 바로 data 속성을 이용하면 굉장히 간결해집니다.

----------

<style>
.aa { width:300px; font-weight:bold; cursor:pointer; padding:10px; text-align:center; border:1px solid #cccccc; margin:0 auto; margin-bottom:5px; }
</style>

<div class="aa" data-bb="red">하나</div>
<div class="aa" data-bb="red">두울</div>
<div class="aa" data-bb="red">세엣</div>
<div class="aa" data-bb="blue">네엣</div>
<div class="aa" data-bb="blue">다섯</div>
<div class="aa" data-bb="blue">여섯</div>

<script>
classAa = document.getElementsByClassName("aa");
for (aa of classAa) {
    aa.onclick = function() {
        for (aa of classAa) aa.style.color = "black";
        this.style.color = this.dataset.bb;
    }
}
classAa[0].onclick();
</script>

----------

물론 저 같은 경우는 위에 처럼 하지 않고 변수나 배열로 변동사항을 따로 끄집어 내어 코드 수정이 용이하게 가공을 한번 더 하지요. 아래에서 3 은 처음부터 3개까지 빨간색이고 텍스트는 zzz 이라는 배열에 담아 놓았습니다.

<style>
.aa { width:300px; font-weight:bold; cursor:pointer; padding:10px; text-align:center; border:1px solid #cccccc; margin:0 auto; margin-bottom:5px; }
</style>

<script>
red = 3;
zzz = ["하나", "두울", "세엣", "네엣", "다섯", "여섯"];
for (i in zzz) {
    redblue = (i < red) ? "red" : "blue";
    document.write('<div class="aa" data-bb=' + redblue + '>' + zzz[i] + '</div>');
}
classAa = document.getElementsByClassName("aa");
for (aa of classAa) {
    aa.onclick = function() {
        for (aa of classAa) aa.style.color = "black";
        this.style.color = this.dataset.bb;
    }
}
classAa[0].onclick();
</script>