将事件添加到涉及for(）的索引中的多个子节点

Adding events to multiple childNodes in a for() respecting index

本文关键字：索引子节点添加事件 for 更新时间：2024-04-12

我需要实现一个简单的事件和dom操作，但我不能使用jQuery

因此，我使用for() 将事件附加到每个节点

document.addEventListener("DOMContentLoaded", function(event) {
    var mainList = document.getElementById('mainList');
    var mainNodes = document.querySelectorAll('#mainList > li');
    for (var i = 0; i < mainNodes.length; i++) { 
        var node = mainNodes[i]; 
        node.addEventListener('contextmenu', function(e){
            e.preventDefault();
            var currentActive = document.querySelectorAll('.active');
           if(currentActive[0]) { // first item with class 'active'
                currentActive[0].className = '';
            }
            this.className = 'active';
        });
        var options = node.getElementsByTagName('li');
        for (var j = 0; j < options.length; j++) {
            var option = options[j]; 
            option.addEventListener('click', function(e){
                e.preventDefault();
                switch(this.className){
                    case 'eliminar':
                        delete(mainList,node);
                        break;
                    case 'obrir':
                        open(mainList,node);
                        break;
                    case 'clonar':
                        clone(mainList,node);
                        break;
                }
                node.className = '';
            });    
        }
    }       
});

这里的问题是，即使所有元素都有该事件，它也会一直打开/克隆/删除最后一个节点

使用var node是否仅适用于循环中的当前节点？

-小提琴-

http://jsfiddle.net/toniweb/Wx8Jf/34/

您的事件处理程序稍后将被触发。当循环结束时，node是最后一个节点。您需要创建闭包来捕获当前节点。类似这样的东西：

for (var i = 0; i < mainNodes.length; i++) { (function(node){
  //your code
  }(mainNodes[i]))
}

尝试：

for (var i = 0; i < mainNodes.length; i++) { (function(node){
  //Your code
  node.addEventListener('contextmenu', function(e){
        e.preventDefault();
        var currentActive = document.querySelectorAll('.active');
       if(currentActive[0]) { // first item with class 'active'
            currentActive[0].className = '';
        }
        this.className = 'active';
    });
    var options = node.getElementsByTagName('li');
    for (var j = 0; j < options.length; j++) {
        var option = options[j]; 
        option.addEventListener('click', function(e){
            e.preventDefault();
            switch(this.className){
                case 'eliminar':
                    delete(mainList,node);
                    break;
                case 'obrir':
                    open(mainList,node);
                    break;
                case 'clonar':
                    clone(mainList,node);
                    break;
            }
            node.className = '';
        });    
    }
}(mainNodes[i]))
}