如何將事件監聽器添加到div的所有子節點和這些div的數組中?

[英]How do I add an event listener to all the childnodes of a div in and array of those div?


I'm teaching myself JS and trying to avoid jQuery until my JS skills are better.

我正在自學JS並試圖避免使用jQuery,直到我的JS技能更好。

Goal: add an eventlistener, for click event, to all the divs of a certain class. Have all the child nodes of that class respond to the event.

目標:為click事件添加一個eventlistener到某個類的所有div。讓該類的所有子節點響應該事件。

My HTML

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

I select all the .grid-panel divs using this JS

我使用這個JS選擇所有.grid-panel div

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

then, since that returns an array of divs with the class .grid-panel I add the event listener for click as such

然后,因為它返回一個帶有.grid-panel類的div數組,所以我添加了click的事件監聽器

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

my function is this

我的功能是這個

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

This does work if I click a very specific part of the .grid-paneldiv and the e logs that specific element. However, clicking any children of the div logs the e as the element i clicked, but the eventlistener is not applied to that element. I'm clearly missing something here with this event delegation. I really want the function to fire on the div clicked and all of its childnodes.

如果我單擊.grid-paneldiv的一個非常特定的部分並且e記錄該特定元素,這確實有效。但是,單擊div的任何子項將e記錄為我單擊的元素,但eventlistener不會應用於該元素。我在這個事件代表團中明顯遺漏了一些東西。我真的希望函數能夠點擊所點擊的div及其所有子節點。

1 个解决方案

#1


3  

You're binding correctly, but if you want to get the element to which the handler is bound in the handler, then use this or event.currentTarget instead of event.target.

您正確綁定,但是如果要獲取處理程序中綁定處理程序的元素,則使用this或event.currentTarget而不是event.target。

The event.target represents the actual element that was clicked, which is sometimes useful as well.

event.target表示單擊的實際元素,有時也很有用。

Also, you should define the event parameter in the function. Not all browsers have it available as a global variable.

此外,您應該在函數中定義事件參數。並非所有瀏覽器都將其作為全局變量提供。

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/03/06/720e3ef9c40e23718c7b2c151f61c553.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com