Question

过去几天遇到了一些问题。我正在尝试尽可能地简化我的代码，现在我已经到了试图通过JavaScript添加事件监听器的阶段，所以我的HTML看起来更整洁。

-HTML细分 -

<input type="button" id="googleSearchButton" />
<input type="button" id="youtubeSearchButton" />
<input type="button" id="wikiSearchButton" />
<input type="button" id="facebookSearchButton" />
<input type="button" id="twitterSearchButton" />
<input type="button" id="tumblrSearchButton" />
<input type="button" id="dropboxSearchButton" />

JavaScript细分

var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"];

window.load = initAll();
function initAll(){
    applyProperties();
}

function applyProperties(){
        for (var i = 0; i < contIDArray.length; i++){
            addEventListeners(contIDArray[i] + "SearchButton");
        }
}

function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert(id), false);
}

function testAlert(id){
    alert(id + " clicked")
}

理论

我希望，你可以看到，FOR循环将循环，直到它用完容器数组中的值。每次它将输出数组中的位置，然后输出“SearchButton”。例如，第一次循环它将输出“googleSearchButton”，第二次输出“youtubeSearchButton”等等。

现在，我知道FOR循环适用于应用属性，因为我使用它来将Button值和文本框占位符文本应用于项目的其他部分。

我已经添加了一个简单的测试函数（“testAlert（）”）并将其设置为传递调用它的元素的id。我已经设置好了，所以一旦添加了事件监听器，我只需单击每个按钮，它就会提示其ID并告诉我它已被点击。

问题

现在，从理论上讲，我认为这样可行。但似乎FOR循环触发了“addEventListeners”函数，而该函数又将事件监听器添加到单击时触发“testAlert”。但它只是在添加事件监听器时触发“testAlert”函数，并且在您单击时不会触发。

如果这看起来有点太多，我道歉，我总是过分解释。希望你能够从我的代码中看到我想要完成的事情，而不是我的解释。

非常感谢帮助。：）

Answer 1

你在这附近，但有一些问题。

首先，你不能只做id.addEventListener。你需要做document.getElementById(id).addEventListener。 id只是一个字符串，你需要一个DOMElement。

其次，执行testAlert(id)时，您正在运行该函数，然后将其返回值（undefined）指定为事件侦听器。你需要传递一个功能。像这样：

id.addEventListener("click", function(){
  testAlert(this.id); // this is the DOMElement you clicked on
}, false);

虽然我建议在所有按钮上添加一个类，然后添加类似的事件。

<input type="button" id="googleSearchButton" class="searchButton" />
<input type="button" id="youtubeSearchButton" class="searchButton" />
<input type="button" id="wikiSearchButton" class="searchButton" />
<input type="button" id="facebookSearchButton" class="searchButton" />
<input type="button" id="twitterSearchButton" class="searchButton" />
<input type="button" id="tumblrSearchButton" class="searchButton" />
<input type="button" id="dropboxSearchButton" class="searchButton" />

然后：

var buttons = document.getElementsByClassName('searchButton');
for(b in buttons){
   if(buttons.hasOwnProperty(b)){
     buttons[b].addEventListener("click", function(){
        testAlert(this.id); // this is the DOMElement you clicked on
     }, false);
   }
}

注意：addEventListener和getElementsByClassName可能并非在所有浏览器中都可用（我的意思是它们可能无法在IE中使用）。这就是许多网站使用JavaScript库的原因，例如jQuery。 jQuery为您处理所有跨浏览器的东西。如果你想使用jQuery，你可以这样做：

$('.searchButton').click(function(){
  testAlert(this.id);
});

注2：在JavaScript中，函数是变量，可以作为参数传递。

document.getElementById(id).addEventListener('click', testAlert, false);

注意()之后没有testAlert，我们传递函数本身，当你testAlert()传递其返回值时。如果你这样做，testAlert将需要稍微修改一下：

function testAlert(){
    alert(this.id + " clicked")
}

Answer 2

变化：


function addEventListeners(id){
    id.addEventListener("click", testAlert(id), false);
}

有：


function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert(id), false);
}

否则，您在字符串上应用addEventListener。在任何情况下，请将addEventListener替换为事件的分配，例如onClick。

Answer 3

id对我来说就像一个字符串。所以做一些像这样的事情：

function addEventListeners(id){
  var obj = document.getElementById(id);
  obj.addEventListener("click", testAlert(id), false);
}

此外，这是工作代码：

http://jsfiddle.net/ZRZY9/2/

obj.addEventListener("click", function() { testAlert(id); }, true);

正如Rocket上面提到的那样“你正在调用它并将事件设置为未定义的返回值”。

坏消息是Internet Explorer 7目前不支持addEventListener（）。

Answer 4

我浏览了你的代码。我遇到的最初问题是您在创建文档之前尝试查找文档中的元素。 window.onLoad在页面完成之前触发。我使用body标签的onload属性对它进行了测试，并且它以这种方式工作。

因此，它是您尝试通过使用“id”字符串找到元素的上述问题的组合，以及在页面完全加载之前触发的函数。

无论如何，很高兴你得到它的工作！

这是我最后的javascript：

    <script>
    var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"];

function initAll(){
    applyProperties();
}

function applyProperties(){
        for (var i = 0; i < contIDArray.length; i++){
    var newString = contIDArray[i] + "SearchButton"
            addEventListeners(newString);
        }
}

function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert, false);
}

function testAlert(){
    alert(this.id + " clicked")
}
</script>

通过Array和FOR循环添加事件监听器

4 个答案: