两个不同元素冲突的Javascript addEventListener答案

【问题标题】：Javascript addEventListener for two different elements conflict两个不同元素冲突的Javascript addEventListener
【发布时间】：2012-07-06 18:02:10
【问题描述】：

我必须防止在搜索表单上提交空搜索。表单没有提交按钮，所以我必须阻止输入。

html代码：

表格 1

 <form method="get" class="search-form" id="searchform" action="http://example.com" >   
                <input class="text" name="s" id="s" type="text" />       
    </form>

表格 2

<form action="http://example.com" class="search-form" method="get">             
    <input type="text" name="s" class="text">                           
</form>

Javascript 代码

// Im sure this funcions returns the 2 different forms, 
var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            searchForms[i].addEventListener("submit", function(e)
               {
                preventSubmit(e); // no problem here
                console.log(i) // ALWAYS LOGS 1         
               });
        } //I also implemented the ie code, but not necessary here, is the same as above for addEventListener
            
    }

每次我提交任何表单时，都会在控制台中写入 1，有什么想法吗？

【问题讨论】：

防止提交(e); console.log(this) // 会给你正确的形式
那里有很多重复项，例如this one。附带说明一下，当您只需要顺序数字迭代时，不要使用for-in。这可能会导致问题。
i 是对索引的引用，而不是对元素的引用。
看过节目“新闻广播”吗？
这是90年代末在美国的一场演出。通常我讨厌情景喜剧，尤其是那些带有笑声的情景喜剧，但我觉得这部非常好。菲尔·哈特曼（来自 SNL） 直到他去世。无论如何，有一个“SMatthew”插曲，所以我想你的用户名可能是一个参考。

标签： javascript dom-events addeventlistener

【解决方案1】：

你需要一个闭包：

var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            (function(i) { // Closure start <-- We make our own static variable i 
                searchForms[i].addEventListener("submit", function(e)
                   {
                   preventSubmit(e); // no problem here
                   console.log(i)        
                   });
            })(i); // Closure end.
        }
    }

这是因为在您的循环之后 (for i in searchForms) i 将是最后一个值 (===1)。您将需要创建一个闭包以获得i 的静态值。

在此处查看更多关于闭包的信息：

How do JavaScript closures work?

【讨论】：

...不知道为什么你有一台 DV。 +1
这就是答案！谢谢，Andreas AL 我会读到关于clousures的文章

【解决方案2】：

回调在提交之前不会执行——此时i 的值为1。immediately-executing function 形式的闭包允许我们捕获i 的变化值并传递一个副本把它放到我们的函数中。

还有

1) 除了在某些情况下，通常避免for-in 在数组上循环。使用传统的for 循环。例如，如果您使用当前的 for-in 通过 ECMA5 querySelectorAll() 方法选择表单，您会得到意想不到的结果（循环的四次迭代，而不是两次）

2) 您不必要地重新评估循环的每次迭代使用哪种事件注册机制。决定一次，在外面。

//get forms
var searchForms = getElementsByClass('.search-form');

//initialise event registration depending on browser
var addEvent = window.addEventListener ? function(el, evt, func, bubble) {
    el.addEventListener(evt, func, bubble);
} : function(el, evt, func) {
    el.attachEvent('on'+evt, func);
};

//bind submit events
for (var i=0, len=searchForms.length; i<len; i++) {
    (function(i) {
        addEvent(searchForms[i], "submit", function(evt) { alert(i); preventSubmit(evt); }, false);
    })(i);
}

【讨论】：

【解决方案3】：

这是由于关闭而发生的，请查看类似的链接

Jquery dynamic buttons dialog for in loop doesn't populate function

【讨论】：