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

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

JavaScript 엘레먼트 요소에서 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>

 

추천
4

댓글 4개

잘봤습니다 ^^
저 같은 경우는 데이터 셋을 좀 동떨어진 사용법일 수 있으나
게시판 스킨의 템플릿 코드 대용으로 활용하고 있습니다
html속성이니 템플릿 페이지를 그대로 실행해서 볼 때도 눈에 거슬리지 않고 좋습니다
활용하기에 따라 아주 유용한 부분인 것 같습니다
@예뜨락
데이터라는 말 그대로 어떤 정보를 그 엘레먼트의 변수로 담아두는 것과 같은 이치라 필요할 때 개개의 엘레먼트에서 꺼내 쓸수 있기 때문에 본인의 상상력에 따라 무한 응용이 가능하다고 봐요. 에뜨락님처럼 활용해도 되구요.

문자열을 담아 논 거라 split 배열 처리도 가능합니다. 아래처럼 본인의 데이터에 내장된 정보를 배열로 쪼갤 수도 있겠지요.

<div id=aa data-bb="red*비타주리">그누보드</div>

<script>
aa.style.color = aa.dataset.bb.split("*")[0];
aa.innerText = aa.dataset.bb.split("*")[1];
</script>
전체 5,154
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT