雄辯的javascript標籤練習

雄辯的Javascript ch.14練習＃3答案，製作標籤。雄辯的javascript標籤練習

<div id="wrapper"> 
    <div data-tabname="one">Tab one</div> 
    <div data-tabname="two">Tab two</div> 
    <div data-tabname="three">Tab three</div> 
</div> 
<script> 
    function asTabs(node) { 
    var tabs = []; 
    for (var i = 0; i < node.childNodes.length; i++) { 
     var child = node.childNodes[i]; 
     if (child.nodeType == document.ELEMENT_NODE) 
     tabs.push(child); 
    } 

    var tabList = document.createElement("div"); 
    tabs.forEach(function(tab, i) { 
     var button = document.createElement("button"); 
     button.textContent = tab.getAttribute("data-tabname"); 
     button.addEventListener("click", function() { selectTab(i); }); 
     tabList.appendChild(button); 
    }); 
    node.insertBefore(tabList, node.firstChild); 

    function selectTab(n) { 
     tabs.forEach(function(tab, i) { 
     if (i == n) 
      tab.style.display = ""; 
     else 
      tab.style.display = "none"; 
     }); 
     for (var i = 0; i < tabList.childNodes.length; i++) { 
     if (i == n) 
      tabList.childNodes[i].style.background = "violet"; 
     else 
      tabList.childNodes[i].style.background = ""; 
     } 
    } 
    selectTab(0); 
    } 
    asTabs(document.querySelector("#wrapper")); 
</script>

會有人心中解釋此行的意義：

button.addEventListener("click", function() { selectTab(i); });

問題1：這看起來像一個簡單的回調，我爲什麼不能簡單地將要selectTab（我）打個電話？

button.addEventListener("click", selectTab(n));

問題2：爲什麼不函數只是返回selecTab功能，即：

button.addEventListener("click", function() { return selectTab(n); });

問題3：我爲什麼不能傳遞一個事件對象爲selectTab這樣嗎？

button.addEventListener("click", selectTab(event)); 
function selectTab(event){console.log(event.target)}

在此先感謝！

來源

2015-10-06 user2949794

1.它是關於何時：您需要的功能，以延遲行動，直到事件發生，而不是在綁定時間發射。 2.有很多方法來編寫代碼，誰知道它爲什麼選擇它？3.與1相關：在事件處理程序執行之前沒有_event_，因此您需要一個事件處理程序函數。所有人都說，這似乎不太「口才」;它使用舊的接口和太多的代碼來做這麼簡單的事情... – dandavis

謝謝dandavis。我可以在你的解釋後提出這個問題：

button.addEventListener("click", function(event){ selectTab(event);}); 
function selectTab(event){ 
     console.log(event.target.textContent); 
    }

大概沒有口才，但我理解它，它的工作原理！

來源

2015-10-06 17:15:31 user2949794

雄辯的javascript標籤練習

回答

相關問題