Как добавить прослушиватель событий ко всем дочерним кодам div и массиву этих div?

Я учусь JS и пытаюсь избежать jQuery, пока мои навыки JS не станут лучше.

цель: добавьте eventlistener, для события click, ко всем divs определенного класса. Все дочерние узлы этого класса реагируют на события.

мой HTML

 <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>

Я выделить все .grid-panel divs с помощью этого JS

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

затем, так как это возвращает массив divs с классом .grid-panel Я добавляю прослушиватель событий для click as такие

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

моя функция это

 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);
    }

это работает, если я нажму очень конкретную часть .grid-paneldiv и e регистрирует этот конкретный элемент. Однако, щелкнув детей от div журналы e как элемент, который я щелкнул, но eventlistener не применяется к этому элементу. Мне явно чего-то не хватает в этой делегации. Я действительно хочу, чтобы функция срабатывала на div щелкнула и все ее дочерние коды.