javascript - 了解使用 Javascript 监听节点列表中的点击事件

Question

因此，我构建了一个 Boostrap 页面，其中有一个子节点数组(或列表)，可供从下拉菜单中进行选择。我想检测哪个节点被单击，然后在菜单按钮的新值中显示该值。

最初我尝试通过以下代码检测点击事件:

 for (var i = 0; i < menu.length; i++){

       menu[i].firstchild.innerHTML.addEventListener("click", function(){

            // Assign value of node clicked on to button 
            button.childNodes[0].nodeValue = menu[i].firstChild.innerHTML;

       });
 }

但是上面的方法不起作用，并且 menu[i].firstChild.innerHTML 似乎总是未定义。我想知道为什么会这样？

我使用另一个问题中的代码找到了问题的解决方案:

  for (var i = 0; i < menu.length; i++){

                    (function(index) {

                        console.log(menu[index]);
                        menu[index].addEventListener("click", function(){

                            for (var x = 0; x < menu.length; x++){

                                if (menu[x] == this){

                                    //alert(x); 
                                    //console.log(button.childNodes[0].nodeValue); 
                                    button.childNodes[0].nodeValue = menu[x].firstChild.innerHTML; 
                                }
                            }


                        }, false);                  

                    })(i);                                                                  
                }

来自:Detecting which node was clicked in javascript

但是，我无法真正理解这里发生了什么。我们实际上传递给第一个 for 循环的是什么？这似乎是 (function(index){//code})(i);我不能说我以前见过这种语法。那么第二个for循环的目的是什么呢？

如果有比我更好的程序员可以向我解释这里发生了什么，我将非常感激。

亲切的问候，

Answer 1

在您的初始代码中，您addEventListener到innerHTML，它是字符串并且对点击充耳不闻。可以轻松修复。

for (var i = 0; i < menu.length; i++){
       menu[i].firstchild.addEventListener("click", function(){
            // Assign value of node clicked on to button 
            //**this** is "clicked" element and what was previously menu[i].firstChild
            //menu[i] is out of scope here (i == menu.length or something else)
            //button is hopefully in global scope.
            button.childNodes[0].nodeValue = this.innerHTML;
       });
 }