자바 스크립트 우수 사례 - onclick 대 unobstrusive

Question

우리 프로젝트에 현재 다음과 같은 문제가 있습니다. > -

 
    <ul> 
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li> 
    </ul> 

이 .listelement에 클릭 (즉 같은 요소-ID와 뭔가 같은 특정 PARAMS와 특정 작업에 요청을 보내야합니다 : 나는 다음과 같이 잠금 요소 목록에 약간의 클릭을 결합해야 모듈/액션? id = 1 & something = something).

요청을 보내고 모든 것을 처리하는 일반적인 요청 클래스를 작성하고 싶습니다. 클릭 및 요청과 관련이 있습니다. 클래스에 방해가되지 않는 클릭을 바인딩하는 것이 좋은지 잘 모르겠습니다. .listelement를 사용하고 내 마크 업의 어딘가에 액션 및 매개 변수 정보를 저장하거나 onclick = "sendRequest (action, params)"에 의해 클릭을 바인딩하는 것이 훨씬 더 나은 경우.

obstructionive-onclick-solution은 나에게 훨씬 쉽게 보이지만 좋은 솔루션인지 확실하지 않습니다.

다른 사람이 의견을 제시 할 수 있다면 행복 할 것입니다. 감사.

Answer 1

괜찮은 마크 업을 사용하고 onclick 속성에 의존하지 말 것을 제안합니다. 가장 큰 이유는 마크 업을 깨끗하게 유지할 수 있으며 이러한 요소가 많은 경우에는 바이트 크기를 줄여줍니다.

또한 id 속성에 값을 인코딩하지 않습니다. 이제 HTML5 데이터 속성을 합법적으로 사용할 수 있으며 하위 호환성도 있습니다. 마크 업의 데이터를 일단

<ul id="container"> 
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li> 
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li> 
    ... 
</ul> 

, 그것은 클릭 핸들러 설정 오히려 간단하고 Request 클래스와 연결합니다. 당신이 많은<li>의 요소가있는 경우

var list = document.getElementById("container"); 
var items = list.getElementsByTagName("li"); 

for(var i = 0; i < items.length; i++) { 
    items[i].onclick = (function(element) { 
     return function() { 
      var action = element.getAttribute('data-action'); 
      var id = element.getAttribute('data-id'); 
      var params = element.getAttribute('data-params'); 

      sendRequest(action, params); 
     }; 
    })(items[i]); 
} 

후 이벤트 위임하는 대신 각 요소에 대해 하나의 핸들러를 추가하는 더 나은 방법이 될 수 있습니다. 또한 onclick 속성 대신 DOM 이벤트 등록 모델을 사용하여 처리기를 추가하는 것이 옵션을 한 핸들러 최대 값으로 제한하기 때문에 고려하십시오.

Answer 2

다음은 옵션입니다. 대신 리의 링크를 <a>으로 만들고 컨트롤러/액션을 쿼리 문자열 (또는 백엔드가 예쁜 URL을 구문 분석 할 수있는 경우 슬래시로 구분 된 키 - 값 쌍)로 지정하십시오. AJAX 호출을 수행 중이라고 가정하면 페이지로드시 모든 <a> 요소에 대한 click 이벤트를 특정 클래스에 연결하는 간단한 자바 스크립트를 갖게됩니다. (예를 들어 .ajax-link와 같은 적절한 항목을 선택할 수 있습니다.) 핸들러에서 브라우저가 href로 이동하지 않도록 기본 동작을 방지하고 href를 뽑아서 구문 분석하고 xhr을 구성하고 멀리 이동하도록 구성합니다. jQuery와 같은 라이브러리를 사용하고 있는지 확실하지 않지만로드 및 코드를 줄이면됩니다.

<a>을 기존 <li>에 중첩시킬 수 있습니다.

도움이 될만한 사람 : JQuery parameter injection on bind/click vs. embedded click handlers with parameters