루프문으로 생성된 요소에 자바스크립트를 연결하는 방법에 대해 

만약 게시물 리스트상에 '삭제' 버튼을 만들어 넣는다고 가정하면 보통은 

<ul> 
    << loop start >> 
        <li> 
            << title >> <a>삭제</a> 
        </li> 
    << loop end >> 
</ul> 

이런식으로 구현될 것입니다. 

저 삭제버튼을 구현하려면, 루프상에서 각 게시물의 고유번호인 idx같은것을 전달해 주어야 하는데, 

어떻게 전달하는것이 바람직한 것인지에 대해서 의견을 교환하고 싶습니다. 

---------------------------------------------------------------------- 

[1안] 고전적인 방식 

<< loop... >> 
    <a href="#" onclick="return delete_btn('<< idx >>');">삭제</a> 
<< loop... >> 

 

매우 간단하고 익숙한 방식이지만 추세에 맞지 않고 
비지니스 로직 분리가 이뤄지지 않음 

---------------------------------------------------------------------- 

[2안] 고유의 id를 이용한 방식 

<< loop... >> 
    <a href="#" id_="delete_btn_<< idx >>">삭제</a> 
<< loop... >> 

 

간단하게 구현이 가능한 방식이지만 자바스크립트를 js파일로 분리할 수가 없음 
루프문으로 스크립트가 생성되므로 클라이언트 부하 발생 

---------------------------------------------------------------------- 

[3안] 커스텀 프로퍼티를 이용한 전달 

<< loop... >> 
    <a href="#" class="delete_btn" idx="<< idx >>">삭제</a> 
<< loop... >> 

 

좋은 방식이지만 유효성 검사를 통과하지 못함 

----------------------------------------------------------------------- 

[4안] 폼 요소를 통한 전달 

<< loop... >> 
    <a href="#" class="delete_btn"><input type="hidden" name="idx" value="<< idx >>" />삭제</a> 
<< loop... >> 

 

좋은 방식이지만 오버해드가 심한편 

----------------------------------------------------------------------- 

[5안] form action을 이용한 구현 

<< loop... >> 
    <form class="delete_form"> 
        <input type="hidden" name="idx" value="<< idx >>" /> 
        <button type="submit">삭제</button> 
    </form> 
<< loop... >> 

 

noscript호환성도 높아지는 좋은 방식이지만 오버해드가 더 심해짐 
  
----------------------------------------------------------------------- 

이외의 더 좋은 방법을 알고 계시거나, 어느것이 웹표준성이나 

서버/클라이언트 부하, 효율성, 호환성 중 어느것을 우선할 때 적합한 지 의견을 나눠보고 싶습니다.