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

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")
}