Làm cách nào để thêm trình xử lý sự kiện vào tất cả các nút con của div và mảng của các div đó?

Question

Tôi tự dạy mình JS và cố gắng tránh jQuery cho đến khi kỹ năng JS của tôi tốt hơn.

Mục tiêu: thêm người tổ chức sự kiện, cho sự kiện nhấp chuột, vào tất cả các div của một lớp nhất định. Có tất cả các nút con của lớp đó phản hồi sự kiện.

HTML My

<div class="grid-panel six columns"> 
      <div class="grid-panel-image"> 
       <i class="fa fa-css3"></i> 
      </div> 
      <div class="grid-panel-title"> 
       <h4>css3</h4> 
      </div>     
    </div> 
    <div class="grid-panel six columns"> 
     <div class="grid-panel-image"> 
      <i class="fa fa-paint-brush"></i> 
     </div> 
     <div class="grid-panel-title"> 
      <h4>tamberator</h4> 
     </div> 
    </div> 

tôi chọn tất cả các .grid-panel divs sử dụng này JS

var gridPanels = document.querySelectorAll('.grid-panel'); 

sau đó, vì đó trả về một mảng của các div với lớp .grid-panel tôi thêm các event listener cho nhấp chuột như vậy

for(i=0; i<gridPanels.length; i++){ 
    gridPanels[i].addEventListener('click', myFunction); 
} 

Chức năng của tôi là thế này

myFunction(){ 
    var e = event.target; 

     switch(e){ 
      case gridPanels[0]: 
      modalArray[0].setAttribute("data-modal-display", "show"); 
      break 
      case gridPanels[1]: 
      modalArray[1].setAttribute("data-modal-display", "show"); 
      break 
     } 

      console.log(e); 
    } 

này không làm việc nếu tôi nhấp một phần rất cụ thể của .grid-panel div và e bản ghi rằng yếu tố cụ thể. Tuy nhiên, việc nhấp vào bất kỳ trẻ em nào của div ghi lại e là phần tử tôi đã nhấp vào, nhưng trình xử lý sự kiện không được áp dụng cho phần tử đó. Tôi rõ ràng đang thiếu thứ gì đó ở đây với phái đoàn sự kiện này. Tôi thực sự muốn các chức năng để bắn trên div nhấp và tất cả các childnodes của nó.

Answer 1

Bạn đang ràng buộc chính xác, nhưng nếu bạn muốn lấy phần tử mà trình xử lý bị ràng buộc trong trình xử lý, sau đó sử dụng this hoặc event.currentTarget thay vì event.target.

event.target đại diện cho yếu tố thực tế đã được nhấp, đôi khi cũng hữu ích.

Ngoài ra, bạn nên xác định tham số event trong hàm. Không phải tất cả các trình duyệt đều có sẵn như là một biến toàn cầu.

function myFunction(event){ 
    var e = this 
// var e = event.currentTarget // same as above 

    switch(e){ 
     case gridPanels[0]: 
     modalArray[0].setAttribute("data-modal-display", "show"); 
     break 

     case gridPanels[1]: 
     modalArray[1].setAttribute("data-modal-display", "show"); 
     break 
    } 

    console.log(e); 
}