的addEventListener到元素和元素的目標數組的數組

window.onload = function() { 
    // set default for landing page: 
    window.location.replace("#Overview"); 
    // register click event listener for top navigation: 
    var navBarButtons = ["class1","class2","class3","class4","class5","class6","class7","class8","class9"]; 
    var navBarTargets = ["id1","id2","id3","id4","id5","id6","id7","id8","id9"]; 
    registerNavBar(navBarButtons, navBarTargets); 
} 
function registerNavBar(navBarButtons, navBarTargets){ 
    for (var i=0; i<navBarButtons.length; i++){ 
     sourceElement=document.querySelector("#left_nav .".concat(navBarButtons[i])); 
     sourceElement.addEventListener("click",clickNavBarButton({targets:navBarTargets,index:i})) 
    } 
} 
function clickNavBarButton(event){ 
    clearPages(event.targets); 
    document.querySelector("#".concat(event.targets[event.index])).classList.add("active"); 
} 
function clearPages(navBarTargets) { 
    for (i=0; i<navBarTargets.length; i++){ 
     var target = "#".concat(navBarTargets[i]),classList=document.querySelector(target).classList; 
     if (classList.contains("active")){ 
      classList.remove("active") 
     } 
    } 
}

我試着去添加一個onclick事件的元素在我的導航欄，看起來像這樣：的addEventListener到元素和元素的目標數組的數組

<div id="left_nav"> 
       <a href="#Overview" title="Overview"><span class="class1"></span></a>

的registerNavBar（）函數無法添加onclick事件到由#left_nav .classn選擇器返回的元素。該.active類定義爲

.active { 
    display: block!important 
}

而默認狀態是

display: none

因此添加/去除。有源類切換的可見性。使用外部庫不是一種選擇。

目前循環中的所有功能都是在沒有拋出錯誤的情況下執行的，我最終顯示了＃id9 beeing的元素，但按鈕不會在單擊時觸發onclick事件。如何正確添加eventListeners到數組中的所有元素？

來源

2016-08-01 Niko

你調用該函數，而不是傳遞的。使用'.bind（）'是一個簡單的解決方案。 'sourceElement.addEventListener（「click」，clickNavBarButton.bind（sourceElement，{targets：navBarTargets，index：i}））' – 2016-08-01 12:27:41

並將'clickNavBarButton'中的參數名稱從'event'更改爲其他內容，因爲這不是實際的事件對象。 – 2016-08-01 12:28:44

您可以創建一個closure保持事件對象數據

function registerNavBar(navBarButtons, navBarTargets){ 
    for (var i=0; i<navBarButtons.length; i++){ 
     sourceElement=document.querySelector("#left_nav .".concat(navBarButtons[i])); 
     sourceElement.addEventListener("click",clickNavBarButton({targets:navBarTargets,index:i})) 
    } 
} 
function clickNavBarButton(event){ 
    return function(){ 
    clearPages(event.targets); 
    document.querySelector("#".concat(event.targets[event.index])).classList.add("active"); 
    } 
}

來源

2016-08-01 13:00:38

的addEventListener到元素和元素的目標數組的數組

回答

相關問題