雄辩的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标签练习

回答

相关问题