자바스크립트를 통해 이벤트를 처리할 경우는 참 많다.
그리고 개발자를 위해서 디자이너가 이벤트를 다 만들어서
제공하는 nice한 경우도 있지만,

정말... 디자인만 주는 디자이너도 존재하기 때문에 해당 이벤트를 내가 컨트롤 해줘야 하는 경우도 존재한다.

사용자 삽입 이미지






한가지 예를 들면 ,
붉은 동그라미친 + - 이미지를 바꾸는 일을 하는 이벤트를 만들어야 한다면?


가장 심플한 방식으론 다음과 같다.

>>자바스크립트

function treeshowhidden(imgid)
 {
     var imgobj = document.getElementById(imgid);
 
     if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )
    {
          imgobj.src = imgobj.getAttribute("src").replace("hide.gif","show.gif");
    }
    else
    {
          imgobj.src = imgobj.getAttribute("src").replace("show.gif","hide.gif");
     }
 }

>> HTML샘플

<dl>
     <dt><a href="javascript:treeshowhidden('taxtree_<%=++idx%>')">
      <img id = "taxtree_<%=idx%>"src="/images/btn/btn_hide.gif" alt="hide"/></a>
     </dt>
 </dl>


대충 이런식으로 id를 jsp, php 단에서 달아주고,
id로 컨트롤 하는 방식... 사실 이경우가 제일 단순한 방법이긴 하다.

자바스크립트에서 이미지 파일 이름 비교할때,
if ( imgobj.getAttribute("src") =="/images/btn/btn_hide.gif") 로 안하고
if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )

하는 이유는, 실제 src가 리턴될때 http:/xxxx.xxx/adsf/images/bin/btn_hide.gif 처럼
full 주소로 나오기 때문에 이렇게 비교함 !!!!

사실 간단한 사실인데... 막상 처리할때 헤맨다 -_-;


근데.. 세상이 이렇게 단순한 형태만 지원되길 원하지 않는다.
암 그렇고 말고

사용자 삽입 이미지


맨날 id 노가다로 해결하던 유저에게 가치관의 혼란이 오기 시작한다. 뭔가 방법은 없을까?
하지만, 몇번끄적거리다가,,,, 많은 사람들은 jsp, php에서
다음과 같이  이중포문으로 id 를 막 달고 이벤트를 걸기 시작한다   (-ㅅ-)

for (int i=0; i<cnt1; i++) {
  for (int j=0; j<cnt2; j++)
  {
       <img id = "imgid_<%=i%>_<%=j%>" .... />
  }
}


중요한 사실이 있다...
우리는 웹으로 개발할때 종종...
웹에서의 특성으로 해결 할 수 있는걸... id남발을 하는 경우도 있다.
(사실 html은 계층적 구조라서 하위 노드 접근도 가능하다)

<script>
function treeshow(id)
{
 var ulobj = document.getElementById(id);
 var liobj = ulobj.getElementsByTagName("li");
 var cnt = liobj.length;
 for(var i=0; i < cnt; i++)
 {
  if ( liobj[i].getElementsByTagName("img")[0].getAttribute("src").indexOf("hide.gif") > 0 )
  {
    liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("hide.gif","show.gif");
  }
  else
  {
   liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("show.gif","hide.gif");
  }
 }
}
</script>
<div>
 <dl>
  <dt><a href="javascript:treeshow('tree_1');">1. 하위 내용만 이미지변경</a></dt>
  <dd>
  <ul id="tree_1">
   <li>일.<img src="/images/btn/btn_hide.gif"/></li>
   <li>이.<img src="/images/btn/btn_hide.gif"/></li>
   <li>삼.<img src="/images/btn/btn_hide.gif"/></li>
  </ul>
  </dd>
 </dl>
 <dl>
  <dt><a href="javascript:treeshow('tree_2');">2. 하위 내용만 이미지변경</a></dt>
  <dd>
  <ul id="tree_2">
   <li>일.<img src="/images/btn/btn_hide.gif"/></li>
   <li>이.<img src="/images/btn/btn_hide.gif"/></li>
  </ul>
  </dd>
 </dl>
</div>

사실 위 소스는...
고정된 내용에 대해 에러체크도 없이 만든 ..
즉 쉽게 말하면 조금 후진소스다...

그래도 html의 각 태그별 하위 계정에 접근할 수 있다는걸 보여주는 아주 simple한 예제...

id를 남발해서 처리하기보다는...
자바스크립트에서 하위계정으로 접근해서 바꾸는 방식으로
한번쯤 해보는것도 나쁘지 않을듯...





+ Recent posts