버블 링으로 많은 요소의 클릭 이벤트 처리

Question

overlay-controls이라는 상위 div에 포함 된 컨트롤 목록이 있습니다.

각 목록 컨트롤에는 각각 고유 한 overlay-controls이 있습니다.

나는 for 루프를 사용하여 delete 클래스를 포함하는 각 버튼에 이벤트 리스너를 추가하고 있습니다.

사용자가 항목을 삭제하기 전에 확인해야합니다. 오버레이 컨트롤에있는 모든 삭제 버튼에 첨부하려고합니다.

for 루프를 사용하여 작동하도록 만들었지 만 버블 링 및 캡처를 사용하는 것이 더 좋은 방법이라는 것을 알고 있습니다. 상위 div로 버블 링하여 오버레이 컨트롤 내부의 삭제 클래스 만 타겟팅하는 데 문제가 있습니다. 내 코드는 for 루프를 사용하고 여기에 http://jsfiddle.net/8qqfeoa2/1/

:

각 삭제 버튼을 클릭하면 여기에 라이브 데모를 참조

(function() { 
     function getConfirmation(e){ 
      var retVal = confirm("Are you sure you want to delete this request?"); 
      if(retVal == true){ 
       return true; 
      }else{ 
       e.preventDefault(); 
       return false; 
      } 
     } 

     var del = document.querySelectorAll('.delete'); 

     for(var i = 0, len = del.length; i < len; i++){ 
     del[i].addEventListener('click', function(e) { 
      getConfirmation(e); 
     }, false); 
     } 

    }()); 

Answer 1

당신은 이벤트를 해달라고 부품/.each 루프

에게 필요

Jquery가 내부적으로 처리합니다.

$('.delete').on('click', function(e){ getConfirmation(e); });

jQuery를 사용하고 getConfirmation 메서드를 사용하는 경우 e.target을 사용하여 해당 클릭 (clicked) 요소를 가져올 수 있습니다.이 요소는 클릭이 발생한 대상을 반환합니다.

Answer 2

만 자바 스크립트 솔루션은

당신은 당신이 jQuery를 같은 질문을 태그하지만 완전히의 사용을 피하는 것 같다

var deletebuttons = document.getElementsByClassName('delete'); for(var button in deletebuttons) { button.onclick = getConfirmation; }